<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>ajax初识 | 上课讲义</title>
    <meta name="description" content="A VitePress site">
    <link rel="stylesheet" href="/tingweipeng/assets/style.f3d4564a.css">
    <link rel="modulepreload" href="/tingweipeng/assets/app.bfa3a24a.js">
    <link rel="modulepreload" href="/tingweipeng/assets/ajax_index.md.2b437449.lean.js">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-f44a984a><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f44a984a data-v-a50780ff><div class="VPNavBar has-sidebar" data-v-a50780ff data-v-6f1d18b5><div class="container" data-v-6f1d18b5><div class="VPNavBarTitle has-sidebar" data-v-6f1d18b5 data-v-d5925166><a class="title" href="/tingweipeng/" data-v-d5925166><!--[--><!--]--><!----><!--[-->上课讲义<!--]--><!--[--><!--]--></a></div><div class="content" data-v-6f1d18b5><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6f1d18b5 data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/webapis/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->webapis<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/js进阶/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->js进阶<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/tingweipeng/ajax/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->ajax<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/vue基础/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->vue基础<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6f1d18b5 data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-481098f9><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6f1d18b5 data-v-e4361c82 data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6ffb57d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6ffb57d3><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><!----><!--[--><!--[--><!----><div class="group" data-v-e4361c82><div class="item appearance" data-v-e4361c82><p class="label" data-v-e4361c82>Appearance</p><div class="appearance-action" data-v-e4361c82><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-e4361c82 data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-481098f9><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6f1d18b5 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-f44a984a data-v-b6162a8b><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-b6162a8b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-b6162a8b><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-b6162a8b>Menu</span></button><a class="top-link" href="#" data-v-b6162a8b> Return to top </a></div><aside class="VPSidebar" data-v-f44a984a data-v-a186aa16><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-a186aa16><span class="visually-hidden" id="sidebar-aria-label" data-v-a186aa16> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-a186aa16><section class="VPSidebarGroup" data-v-a186aa16 data-v-6e45c352><div class="title" data-v-6e45c352><h2 class="title-text" data-v-6e45c352>ajax</h2><div class="action" data-v-6e45c352><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-6e45c352><!--[--><!--[--><a class="VPLink link link active" href="/tingweipeng/ajax/" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>01-初识ajax</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/tingweipeng/ajax/day02.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>02-表单提交</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/tingweipeng/ajax/day03.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>03-xhr和promise</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/tingweipeng/ajax/day04.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>04-异步编程和事件循环</span><!--]--><!----></a><!----><!--]--><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-f44a984a data-v-d981fe29><div class="VPDoc has-sidebar has-aside" data-v-d981fe29 data-v-cfb513e0><div class="container" data-v-cfb513e0><div class="aside" data-v-cfb513e0><div class="aside-curtain" data-v-cfb513e0></div><div class="aside-container" data-v-cfb513e0><div class="aside-content" data-v-cfb513e0><div class="VPDocAside" data-v-cfb513e0 data-v-afc4c1a1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-afc4c1a1 data-v-2865c0b0><div class="content" data-v-2865c0b0><div class="outline-marker" data-v-2865c0b0></div><div class="outline-title" data-v-2865c0b0>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-2865c0b0><span class="visually-hidden" id="doc-outline-aria-label" data-v-2865c0b0> Table of Contents for current page </span><ul class="root" data-v-2865c0b0 data-v-1188541a><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-afc4c1a1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-cfb513e0><div class="content-container" data-v-cfb513e0><!--[--><!--]--><main class="main" data-v-cfb513e0><div style="position:relative;" class="vp-doc _tingweipeng_ajax_index" data-v-cfb513e0><div><h1 id="ajax初识" tabindex="-1">ajax初识 <a class="header-anchor" href="#ajax初识" aria-hidden="true">#</a></h1><h2 id="学习目标" tabindex="-1">学习目标 <a class="header-anchor" href="#学习目标" aria-hidden="true">#</a></h2><ol><li>了解浏览器和服务器通信过程</li><li>掌握<code>axios</code>的使用</li><li>理解报文和状态码概念</li><li>掌握接口文档使用</li><li>完成案例-聊天机器人</li></ol><h2 id="概念-浏览器-服务器" tabindex="-1">概念-浏览器&amp;服务器 <a class="header-anchor" href="#概念-浏览器-服务器" aria-hidden="true">#</a></h2><h3 id="目标" tabindex="-1">目标 <a class="header-anchor" href="#目标" aria-hidden="true">#</a></h3><p>了解浏览器和服务器的作用</p><h3 id="浏览器" tabindex="-1">浏览器 <a class="header-anchor" href="#浏览器" aria-hidden="true">#</a></h3><p><strong>浏览器概念</strong>：安装并运行在电脑上的一个<strong>软件</strong></p><p>常见浏览器软件如下：</p><p><img src="/tingweipeng/assets/1667920718498-621c9bea-91a8-49d4-a36e-a1bb3aaa2720.18f2b203.png" alt="image.png" data-fancybox="gallery"></p><p><strong>浏览器作用</strong>: 输入网址, 即可浏览相关内容</p><p><img src="/tingweipeng/assets/1667921179529-3de14235-f929-4dd8-b4df-f50d2333b5ec.29768e8d.png" alt="image.png" data-fancybox="gallery"></p><h3 id="提问-浏览器自己有这些内容吗" tabindex="-1">提问：浏览器自己有这些内容吗? <a class="header-anchor" href="#提问-浏览器自己有这些内容吗" aria-hidden="true">#</a></h3><p>肯定是没有的! 那浏览的这些网页文件在哪里?</p><p>答案: 在服务器上</p><h3 id="服务器" tabindex="-1">服务器 <a class="header-anchor" href="#服务器" aria-hidden="true">#</a></h3><p><strong>服务器概念</strong>: 一台24小时开机的电脑, 拥有更大的磁盘空间和访问速度, 一般只有主机和系统 <img src="/tingweipeng/assets/1667920876458-5aa8c980-5af4-41f2-9717-4806847b4736.4dade6cf.png" alt="image.png" data-fancybox="gallery"><strong>服务器作用</strong>: 为访问者提供各种资源 。</p><p>资源: html文件, css文件, js文件, 视频文件, 音频文件, 数据等</p><p><img src="/tingweipeng/assets/1667921580491-5b9a1057-6499-441d-ac26-64372fcb0efd.62701e8b.jpeg" alt="" data-fancybox="gallery"></p><h3 id="小结" tabindex="-1">小结 <a class="header-anchor" href="#小结" aria-hidden="true">#</a></h3><ol><li><p>浏览器访问的资源在哪里存着?</p><details><summary>答案</summary><ul><li> 在服务器上存储 </li></ul></details></li><li><p>浏览器和服务器的作用分别是?</p><details><summary>答案</summary><ul><li> 浏览器负责浏览资源, 服务器负责提供资源 </li></ul></details></li></ol><h2 id="概念-url网址" tabindex="-1">概念-url网址 <a class="header-anchor" href="#概念-url网址" aria-hidden="true">#</a></h2><h3 id="目标-1" tabindex="-1">目标 <a class="header-anchor" href="#目标-1" aria-hidden="true">#</a></h3><ul><li>理解url作用</li><li>掌握url组成部分</li></ul><h3 id="url概念" tabindex="-1">url概念 <a class="header-anchor" href="#url概念" aria-hidden="true">#</a></h3><blockquote><p>前面说, 浏览器用于浏览资源, 服务器用于提供资源，那浏览器想要访问需要看到的资源, 就得知道资源的url网址</p></blockquote><p><strong>概念</strong>：url, 统一资源定位符, 标记资源在网络中的位置。也称<strong>网址</strong></p><p><strong>作用</strong>: 标记某个资源在网络中的唯一地址。只有通过URL地址，浏览器才能定位资源的存放位置，从而成功访问到对应的资源。</p><p><strong>示例</strong>：这里每个url网址都能访问不同的页面和资源</p><blockquote><p>淘宝首页: <a href="https://www.taobao.com/" target="_blank" rel="noreferrer">https://www.taobao.com/</a></p><p>京东首页: <a href="https://www.jd.com/" target="_blank" rel="noreferrer">https://www.jd.com/</a></p><p>中国首都博物馆首页: <a href="http://www.capitalmuseum.org.cn/zlxx/zlxx.html" target="_blank" rel="noreferrer">http://www.capitalmuseum.org.cn/zlxx/zlxx.html</a></p><p>网易新闻数据: <a href="http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html" target="_blank" rel="noreferrer">http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html</a></p><p>传智教育logo图: <a href="http://www.itcast.cn/2018czgw/images/logo.png" target="_blank" rel="noreferrer">http://www.itcast.cn/2018czgw/images/logo.png</a></p></blockquote><h3 id="url网址组成" tabindex="-1">url网址组成 <a class="header-anchor" href="#url网址组成" aria-hidden="true">#</a></h3><p><img src="/tingweipeng/assets/1667921677867-1c4cee9c-79ac-495f-8c85-10a612964c8e.d2580911.png" alt="image.png" data-fancybox="gallery"><strong>4个部分组成</strong>：</p><ol><li>协议</li><li>主机名</li><li>端口号（可省略）</li><li>资源存放的路径</li></ol><p>示例： <a href="http://www.itcast.cn:80/2018czgw/images/logo.png" target="_blank" rel="noreferrer">http://www.itcast.cn:80/2018czgw/images/logo.png</a></p><p>协议: 协议就是<strong>浏览器</strong>和<strong>服务器</strong>之间传输数据的规则, 保证都能读懂对方发来的内容</p><p>主机名: 标识服务器在互联网中的唯一地址, 确保能够访问到他 <img src="/tingweipeng/assets/1667922351415-35aa9afc-1e56-4c1c-8d75-b97f0e73feff.4da8fedb.jpeg" alt="" data-fancybox="gallery"> 端口号解释:</p><ul><li>端口号有效范围默认在0-65535之间的整数</li><li>标识服务器里的不同服务</li><li>浏览器默认访问的都是80端口</li><li>类比： 主机名是一个商场，端口号就一个个具体的门店号，想要买东西，就要具体到门店号。</li></ul><p><img src="/tingweipeng/assets/1667922923749-59548e0e-8490-42a8-93f3-5bb3a11ac1fb.6fc89fcb.jpeg" alt="" data-fancybox="gallery"></p><p>路径: 确定在服务器上的具体位置</p><blockquote><p>类比： <strong>主机名</strong>是一个商场，<strong>端口号</strong>就一个个具体的门店号，想要买东西，就要具体到门店号。<strong>路径</strong>就是柜台信息</p></blockquote><p><img src="/tingweipeng/assets/1667923128661-7927ada5-b90f-49c9-91d7-62ca1ec1c0b9.9caeaa42.jpeg" alt="" data-fancybox="gallery"></p><h3 id="小结-1" tabindex="-1">小结 <a class="header-anchor" href="#小结-1" aria-hidden="true">#</a></h3><ol><li><p>url网址的作用是什么?</p><details><summary>答案</summary><ul><li> 用来标记资源的位置 </li></ul></details></li><li><p>url网址的4个组成部分是什么?</p></li></ol><details><summary>答案</summary><ul><li> 协议, 主机名, 端口号, 资源路径</li></ul></details><h2 id="概念-请求和响应" tabindex="-1">概念-请求和响应 <a class="header-anchor" href="#概念-请求和响应" aria-hidden="true">#</a></h2><h3 id="目标-2" tabindex="-1">目标 <a class="header-anchor" href="#目标-2" aria-hidden="true">#</a></h3><p>掌握请求和响应的概念，会用浏览器自带的调试工具查看。request： 请求； response： 响应</p><h3 id="概念" tabindex="-1">概念 <a class="header-anchor" href="#概念" aria-hidden="true">#</a></h3><p>浏览器和服务器之间的通信过程, 分为两个步骤： <strong>请求</strong>和<strong>响应</strong></p><ol><li>请求: 浏览器, 通过网络去服务器<strong>要资源</strong>的过程, 叫做&quot;<strong>请求</strong>&quot;</li><li>响应: 服务器, 通过网络给浏览器<strong>返回资源</strong>的过程, 叫做&quot;<strong>响应</strong>&quot;</li></ol><p><img src="/tingweipeng/assets/1667953758678-f7e8b870-5e39-4e0c-bae1-eb3a84794c56.0726025d.png" alt="image.png" data-fancybox="gallery"> 在这个过程中，浏览器是主动的，服务器是被动的。</p><h3 id="实操验证" tabindex="-1">实操验证 <a class="header-anchor" href="#实操验证" aria-hidden="true">#</a></h3><p>目标: 要学会使用浏览器自带的Network调试工具查看请求和响应过程</p><ol><li>打开浏览器, 访问<a href="http://www.baidu.com" target="_blank" rel="noreferrer">http://www.baidu.com</a>, 并右键检查, 选择Network选项卡 <img src="/tingweipeng/assets/1667954097557-2a93b5c8-24e3-407a-bcaa-9e4f490f4b03.87128610.png" alt="image.png" data-fancybox="gallery"></li><li>这里每一行, 都是浏览器发送的一次请求 <img src="/tingweipeng/assets/1667954117346-58329d76-05e0-458e-b618-88e03cd4b5e7.5caf3683.png" alt="image.png" data-fancybox="gallery"></li><li>点击后, 会先看到请求的具体url网址 <img src="/tingweipeng/assets/1667954163675-a113ad30-678c-457b-8ca9-708bf216a1ff.d7aeecd2.png" alt="image.png" data-fancybox="gallery"></li></ol><p>request： 请求； response： 响应</p><ol start="4"><li>点击右侧response是响应的结果 <img src="/tingweipeng/assets/1667954188100-faed196c-d7b7-4748-8f5c-acd718b71636.64cbbff3.png" alt="image.png" data-fancybox="gallery"></li><li>点击右侧preview, 是浏览器试着对响应内容进行格式化 <img src="/tingweipeng/assets/1667954226576-35bd5dd0-e339-4a04-a723-51f2ae94491a.e95fc36d.png" alt="image.png" data-fancybox="gallery"></li><li>为何一个主页有这么多次请求?</li></ol><ul><li>首先请求回来的主页html里, 还有一些引用其他文件的语法, 例如script的src和link的href, 还有img的src, 都会让浏览器单独再发几次请求</li><li>大家记住: 一次请求对应一次响应, 响应回来的内容浏览器会进行解析</li></ul><h3 id="小结-2" tabindex="-1">小结 <a class="header-anchor" href="#小结-2" aria-hidden="true">#</a></h3><ol><li><p>请求是什么?</p><details><summary>答案</summary><ul><li> 是浏览器通过url去获取资源的过程 </li></ul></details></li><li><p>响应是什么?</p><details><summary>答案</summary><ul><li> 是服务器返回资源的过程 </li></ul></details></li></ol><h2 id="概念-响应资源划分" tabindex="-1">概念-响应资源划分 <a class="header-anchor" href="#概念-响应资源划分" aria-hidden="true">#</a></h2><h3 id="目标-3" tabindex="-1">目标 <a class="header-anchor" href="#目标-3" aria-hidden="true">#</a></h3><p>了解url网址都能返回哪些类型资源</p><h3 id="提问-访问网页时-能获取到几种类型资源" tabindex="-1">提问：访问网页时，能获取到几种类型资源？ <a class="header-anchor" href="#提问-访问网页时-能获取到几种类型资源" aria-hidden="true">#</a></h3><p>大家看看访问百度的首页, 返回了哪几种类型的资源呢?</p><p><img src="/tingweipeng/assets/1667954485066-b7b59e6d-c4bd-4b8f-9fb0-7da9d83094b1.f8ae1570.png" alt="image.png" data-fancybox="gallery"></p><ol><li>那还有一些URL地址可以返回一些<code>JSON</code>格式的字符串数据</li></ol><blockquote><p>例如: 图书列表: <a href="http://ajax-base-api-t.itheima.net/api/getbooks" target="_blank" rel="noreferrer">http://ajax-base-api-t.itheima.net/api/getbooks</a></p><p>例如: 网易新闻-头条: <a href="http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html" target="_blank" rel="noreferrer">http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html</a></p><p>重要: 这些url地址不变, 但是数据会在服务器端自动随着时间自动更新，他们也叫数据地址</p></blockquote><p><img src="/tingweipeng/assets/1667954790474-108dcfbc-6beb-4bb0-abf6-363c736dc6af.b4e8c011.png" alt="image.png" data-fancybox="gallery"> 示意图</p><p><img src="/tingweipeng/assets/1667988800631-7b5050d2-8065-4a7f-a20f-e5b93039da7f.72e2ea3f.jpeg" alt="" data-fancybox="gallery"></p><h3 id="提问-数据对于一个网页是否重要呢" tabindex="-1">提问：数据对于一个网页是否重要呢? <a class="header-anchor" href="#提问-数据对于一个网页是否重要呢" aria-hidden="true">#</a></h3><blockquote><p>重要，重要，重要！</p></blockquote><p>以前, 我们写的网页都是html+css+js, 而且数据都是固定在文件里的, 无法动态变化，离开数据之后，哪怕这个网页做的再漂亮，也没有实际的作用。</p><p>那我们能不能在自己的项目里, 用一些技术请求一些数据铺设到我们自己的网页中呢?</p><p>那就是接下来要学习的Ajax技术了</p><h3 id="小结-3" tabindex="-1">小结 <a class="header-anchor" href="#小结-3" aria-hidden="true">#</a></h3><ol><li><p>响应的资源类型有哪些?</p><details><summary>答案</summary><ul><li> 有html, css, js, 图片, 音频, 视频, JSON字符串数据等等 </li></ul></details></li><li><p>数据类型的url网址返回的数据格式是?</p><details><summary>答案</summary><ul><li> JSON格式的字符串, 前端接收后转换下就可以当对象用 </li></ul></details></li></ol><h2 id="概念-json" tabindex="-1">概念-JSON <a class="header-anchor" href="#概念-json" aria-hidden="true">#</a></h2><h3 id="目标-4" tabindex="-1">目标 <a class="header-anchor" href="#目标-4" aria-hidden="true">#</a></h3><p>掌握什么是JSON</p><h3 id="json" tabindex="-1">JSON <a class="header-anchor" href="#json" aria-hidden="true">#</a></h3><ol><li>JSON（全称：JavaScript Object Notation）是一种数据交换格式，它本质上是<strong>用字符串的方式来表示对象或数组</strong></li><li>JSON 数据：用字符串的方式来表示的对象或数组类型的数据</li></ol><ul><li><strong>对象格式JSON字符串</strong><ul><li>key必须用双引号包起来</li><li>value 的值只能是字符串、数字、布尔值、null、数组、对象类型（可选类型只有这 6 种）</li></ul></li></ul><div class="language-json line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">const user = `{</span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">&quot;name&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;小红&quot;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">&quot;age&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">&quot;marry&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">true</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">&quot;weight&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">80</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">&quot;hobby&quot;</span><span style="color:#C9D1D9;">: [</span><span style="color:#A5D6FF;">&quot;吃饭&quot;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&quot;睡觉&quot;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&quot;打豆豆&quot;</span><span style="color:#C9D1D9;">],</span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">&quot;address&quot;</span><span style="color:#C9D1D9;">: {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#7EE787;">&quot;province&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;辽宁省&quot;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#7EE787;">&quot;city&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;大连市&quot;</span></span>
<span class="line"><span style="color:#C9D1D9;"> }</span></span>
<span class="line"><span style="color:#C9D1D9;">}`</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ul><li><strong>数组格式的 JSON 数据</strong>，最外层使用 [ ] 进行包裹，内部的每一项数据之间使用英文的 , 字符串双引号, 数据项用逗号隔开。</li><li>其中：每一项的值类型只能是字符串、数字、布尔值、null、数组、对象这 6 种类型之一。</li></ul><div class="language-json line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">const array = `[</span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&quot;前端&quot;</span><span style="color:#C9D1D9;">, </span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">2022</span><span style="color:#C9D1D9;">, </span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">true</span><span style="color:#C9D1D9;">, </span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">null</span><span style="color:#C9D1D9;">, </span></span>
<span class="line"><span style="color:#C9D1D9;"> [</span><span style="color:#A5D6FF;">&quot;html&quot;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&quot;CSS&quot;</span><span style="color:#C9D1D9;">], </span></span>
<span class="line"><span style="color:#C9D1D9;"> {</span><span style="color:#7EE787;">&quot;name&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;小马&quot;</span><span style="color:#C9D1D9;">, </span><span style="color:#7EE787;">&quot;age&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">]`</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="配套api" tabindex="-1">配套API <a class="header-anchor" href="#配套api" aria-hidden="true">#</a></h3><ul><li><p><code>JSON.stringify(JS数据类型)</code> 将js对象转换为JSON字符串</p></li><li><p><code>JSON.parse(JSON字符串)</code> 将JSON字符串转换为js对象</p></li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 目标: 把JS数据类型 ==&gt; 转成JSON字符串</span></span>
<span class="line"><span style="color:#8B949E;">// 语法: JSON.stringify(JS数据类型)</span></span>
<span class="line"><span style="color:#8B949E;">// 返回值: JSON字符串</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> obj </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    username: </span><span style="color:#A5D6FF;">&#39;小马&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    age: </span><span style="color:#79C0FF;">16</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    sex: </span><span style="color:#A5D6FF;">&#39;男&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> resultStr </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">JSON</span><span style="color:#C9D1D9;">.</span><span style="color:#D2A8FF;">stringify</span><span style="color:#C9D1D9;">(obj)</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(resultStr); </span><span style="color:#8B949E;">// &#39;{&quot;username&quot;:&quot;小马&quot;,&quot;age&quot;:16,&quot;sex&quot;:&quot;男&quot;}&#39;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// 目标: 把JSON字符串 ==&gt; 转成JS数据类型</span></span>
<span class="line"><span style="color:#8B949E;">// 语法: JSON.parse(JSON字符串)</span></span>
<span class="line"><span style="color:#8B949E;">// 返回值: JS数据类型</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> jsonStr </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;{&quot;username&quot;:&quot;小马&quot;,&quot;age&quot;:16,&quot;sex&quot;:&quot;男&quot;}&#39;</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> result </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">JSON</span><span style="color:#C9D1D9;">.</span><span style="color:#D2A8FF;">parse</span><span style="color:#C9D1D9;">(jsonStr)</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(result); </span><span style="color:#8B949E;">// {username: &#39;小马&#39;, age: 16, sex: &#39;男&#39;}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="小结-4" tabindex="-1">小结 <a class="header-anchor" href="#小结-4" aria-hidden="true">#</a></h3><ol><li><p>JSON是什么?</p><details><summary>答案</summary><ul><li> 以字符串的形式来表现对象/数组的数据格式 </li></ul></details></li><li><p>JSON字符串和JS数据类型如何互相转换？</p><details><summary>答案</summary><ul><li> JSON.stringify() JS数据类型转JSON字符串 </li><li> JSON.parse() JSON字符串转成JS数据类型 </li></ul></details></li></ol><h2 id="概念-ajax讲解" tabindex="-1">概念-Ajax讲解 <a class="header-anchor" href="#概念-ajax讲解" aria-hidden="true">#</a></h2><h3 id="目标-5" tabindex="-1">目标 <a class="header-anchor" href="#目标-5" aria-hidden="true">#</a></h3><p>了解Ajax概念和作用</p><h3 id="ajax是什么" tabindex="-1">Ajax是什么 <a class="header-anchor" href="#ajax是什么" aria-hidden="true">#</a></h3><p>Ajax[ˈeɪdʒæks], 是一种在<strong>JS代码</strong>中发请求并获取响应数据的技术 <img src="/tingweipeng/assets/1667958403085-5f2a385b-25fa-4f30-a2bb-d6d29e684ad6.5fa25762.png" alt="image.png" data-fancybox="gallery"></p><h3 id="使用场景" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景" aria-hidden="true">#</a></h3><p><strong>不刷新</strong>页面的情况，从服务器获取数据，以更新页面</p><ol><li>比如验证手机号是否在服务器已经注册过了 <img src="/tingweipeng/assets/1667958435487-694215db-3bf0-45f0-bcb0-935b9c5a7fb5.9f277018.png" alt="image.png" data-fancybox="gallery"></li><li>根据输入的搜索关键字, 联想菜单提示数据切换 <img src="/tingweipeng/assets/1667958462355-033ade9b-9e2e-47ca-8257-3beb0bbf0740.d4d81fef.gif" alt="16_ajax搜索联想菜单.gif" data-fancybox="gallery"></li><li>根据增和删除, 修改页面数据 <img src="/tingweipeng/assets/1667958490106-1313babf-eb22-4e1e-bb70-6fee2244ee4d.db15a834.gif" alt="18_图书管理.gif" data-fancybox="gallery"></li></ol><h3 id="小结-5" tabindex="-1">小结 <a class="header-anchor" href="#小结-5" aria-hidden="true">#</a></h3><ol><li><p>ajax是？</p><details><summary>答案</summary><ul><li> 在一种在JS中编写代码, 来获取数据的技术 </li></ul></details></li></ol><h2 id="示例-用axios发起ajax请求" tabindex="-1">示例-用axios发起ajax请求 <a class="header-anchor" href="#示例-用axios发起ajax请求" aria-hidden="true">#</a></h2><h3 id="目标-6" tabindex="-1">目标 <a class="header-anchor" href="#目标-6" aria-hidden="true">#</a></h3><p>掌握Ajax库-&gt;axios的使用</p><h3 id="axios和ajax" tabindex="-1">axios和ajax <a class="header-anchor" href="#axios和ajax" aria-hidden="true">#</a></h3><p>axios是别人封装好的，用来发ajax请求的工具。</p><p>ajax是：一个技术名词；axios是具体实现；</p><p>类比：</p><ul><li>ajax：汽车的无人驾驶技术 axios：小鹏汽车</li><li>ajax：灵魂伴侣 axios：小花</li></ul><h3 id="axios的使用" tabindex="-1">axios的使用 <a class="header-anchor" href="#axios的使用" aria-hidden="true">#</a></h3><ol><li><p>先引入本地<code>axios.js</code>文件到自己的网页中</p></li><li><p>axios的使用语法</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">    url: </span><span style="color:#A5D6FF;">&#39;请求的URL网址&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    method: </span><span style="color:#A5D6FF;">&#39;请求的方法&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">结果变量名</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// .then 用来指定请求成功之后的回调函数</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 形参中的 result 是请求成功之后的结果</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div></li><li><p>运行后结果, 在控制台可以看到, 请求并接收到此url网址返回的响应结果打印的是axios结果对象, 而响应的真正数据在data属性下包裹着</p></li></ol><h3 id="示例代码" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;第一个ajax程序。请在控制台看打印输出&lt;/</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/province&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;GET&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><ul><li>请求的url地址, 就是标记资源的url网址省份列表: <a href="http://ajax-api.itheima.net/api/province" target="_blank" rel="noreferrer">http://ajax-api.itheima.net/api/province</a></li><li>请求的方法是&#39;GET&#39;固定字符串, 代表获取数据动作</li></ul><h3 id="小结-6" tabindex="-1">小结 <a class="header-anchor" href="#小结-6" aria-hidden="true">#</a></h3><ol><li><p>axios是什么？</p><details><summary>答案</summary><ul><li> axios是别人封装好的，用来发ajax请求的工具 </li></ul></details></li><li><p>axios的格式是?</p><details><summary>答案</summary><ul><li> axios({url: 地址， method: 方式}).then() </li></ul></details></li></ol><h2 id="概念-接口相关" tabindex="-1">概念-接口相关 <a class="header-anchor" href="#概念-接口相关" aria-hidden="true">#</a></h2><h3 id="目标-7" tabindex="-1">目标 <a class="header-anchor" href="#目标-7" aria-hidden="true">#</a></h3><ul><li>了解什么是接口</li><li>会读接口文档</li></ul><h3 id="接口" tabindex="-1">接口 <a class="header-anchor" href="#接口" aria-hidden="true">#</a></h3><p>接口是提供数据服务的url网址。</p><p>使用 Ajax 技术请求数据时，被请求的 URL 网址，就叫做数据接口（简称：接口或 API 接口）。 同时，每个接口必须有对应的请求方式。</p><p>例如：</p><ul><li>获取省份列表的接口（ GET 请求 ）<a href="http://ajax-api.itheima.net/api/province" target="_blank" rel="noreferrer">http://ajax-api.itheima.net/api/province</a></li><li>添加图书的接口（POST 请求）<a href="http://ajax-api.itheima.net/api/books" target="_blank" rel="noreferrer">http://ajax-api.itheima.net/api/books</a></li></ul><h3 id="接口文档" tabindex="-1">接口文档 <a class="header-anchor" href="#接口文档" aria-hidden="true">#</a></h3><p>是接口使用说明书，服务器会把一些接口地址罗列整理到一个文档上</p><ul><li>可能一张纸记录的 (太low)</li><li>可能微信/qq, 打字告诉你 (太low)</li><li>可能用一些工具生成接口文档网页 (标准): <a href="https://www.apifox.cn/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e" target="_blank" rel="noreferrer">https://www.apifox.cn/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e</a></li></ul><h3 id="接口文档格式" tabindex="-1">接口文档格式 <a class="header-anchor" href="#接口文档格式" aria-hidden="true">#</a></h3><p>包含如下内容 <img src="/tingweipeng/assets/1667960249939-68da7b21-9f60-4154-aa41-223dc6f728e4.6aa4d635.png" alt="37.png" data-fancybox="gallery"></p><h3 id="小结-7" tabindex="-1">小结 <a class="header-anchor" href="#小结-7" aria-hidden="true">#</a></h3><ol><li><p>接口是什么?</p><details><summary>答案</summary><ul><li> 接口是提供数据服务的url网址 </li></ul></details></li><li><p>什么是接口文档?</p><details><summary>答案</summary><ul><li> 服务器端提供的接口url网址的一个文档, 是接口使用的说明书 </li></ul></details></li></ol><h2 id="语法-axios请求单个参数传递" tabindex="-1">语法-axios请求单个参数传递 <a class="header-anchor" href="#语法-axios请求单个参数传递" aria-hidden="true">#</a></h2><h3 id="目标-8" tabindex="-1">目标 <a class="header-anchor" href="#目标-8" aria-hidden="true">#</a></h3><p>掌握如何携带查询参数给服务器</p><h3 id="axios传参的语法" tabindex="-1">axios传参的语法 <a class="header-anchor" href="#axios传参的语法" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">    url: </span><span style="color:#A5D6FF;">&#39;请求地址&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    method: </span><span style="color:#A5D6FF;">&#39;请求方式&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 后端规定的参数名: 前端准备给后端的值</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(result)</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="需求" tabindex="-1">需求 <a class="header-anchor" href="#需求" aria-hidden="true">#</a></h3><p>获取指定的省份的城市</p><h3 id="接口-1" tabindex="-1">接口 <a class="header-anchor" href="#接口-1" aria-hidden="true">#</a></h3><p>请求方式：<code>get</code></p><p>请求url地址：<a href="http://ajax-api.itheima.net/api/city" target="_blank" rel="noreferrer">http://ajax-api.itheima.net/api/city</a></p><p>参数如下：</p><ul><li>pname: 省份名字</li></ul><p>返回值: 省份列表</p><h3 id="示例代码-1" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-1" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">    url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/city&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    method: </span><span style="color:#A5D6FF;">&#39;GET&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">        pname: </span><span style="color:#A5D6FF;">&#39;辽宁省&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#8B949E;">// 告诉后台, 我要获取辽宁省下的城市列表</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(result)</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="语法-axios请求多个参数传递" tabindex="-1">语法-axios请求多个参数传递 <a class="header-anchor" href="#语法-axios请求多个参数传递" aria-hidden="true">#</a></h2><h3 id="目标-9" tabindex="-1">目标 <a class="header-anchor" href="#目标-9" aria-hidden="true">#</a></h3><p>掌握如何携带查询参数给服务器</p><h3 id="axios传参的语法-1" tabindex="-1">axios传参的语法 <a class="header-anchor" href="#axios传参的语法-1" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">    url: </span><span style="color:#A5D6FF;">&#39;请求地址&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    method: </span><span style="color:#A5D6FF;">&#39;请求方式&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 后端规定的参数名: 前端准备给后端的值</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(result)</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="需求-1" tabindex="-1">需求 <a class="header-anchor" href="#需求-1" aria-hidden="true">#</a></h3><p>获取获取某个城市下的地区列表</p><h3 id="接口-2" tabindex="-1">接口 <a class="header-anchor" href="#接口-2" aria-hidden="true">#</a></h3><p>请求方式：<code>get</code></p><p>请求url地址：<a href="http://ajax-api.itheima.net/api/area" target="_blank" rel="noreferrer">http://ajax-api.itheima.net/api/area</a></p><p>参数如下</p><ul><li>pname: 省份名字</li><li>cname: 城市名字</li></ul><p>返回值: 地区名字列表</p><h3 id="示例代码-2" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-2" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 携带多个参数</span></span>
<span class="line"><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">    url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/area&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    method: </span><span style="color:#A5D6FF;">&#39;GET&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">        pname: </span><span style="color:#A5D6FF;">&#39;辽宁省&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#8B949E;">// 告诉后台, 我要获取辽宁省下的城市列表</span></span>
<span class="line"><span style="color:#C9D1D9;">        cname: </span><span style="color:#A5D6FF;">&#39;大连市&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(result);</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="小结-8" tabindex="-1">小结 <a class="header-anchor" href="#小结-8" aria-hidden="true">#</a></h3><ol><li><p>axios如何传查询参数?</p><details><summary>答案</summary><ul><li> 使用params选项 </li></ul></details></li><li><p>查询参数有什么作用？</p><details><summary>答案</summary><ul><li> 让后端返回匹配的数据 </li></ul></details></li></ol><h2 id="语法-传参本质和url编码" tabindex="-1">语法-传参本质和URL编码 <a class="header-anchor" href="#语法-传参本质和url编码" aria-hidden="true">#</a></h2><h3 id="目标-10" tabindex="-1">目标 <a class="header-anchor" href="#目标-10" aria-hidden="true">#</a></h3><ul><li>了解传参本质</li><li>了解URL编码</li></ul><h3 id="讲解" tabindex="-1">讲解 <a class="header-anchor" href="#讲解" aria-hidden="true">#</a></h3><ol><li><p>运行后, 查看获取地区列表的这次请求, 在浏览器的Network调试工具观察, 本次Ajax请求, params的参数在运行时, 会被axios携带在url?后面</p><p><img src="/tingweipeng/assets/1668050098505-dcefd315-cd33-4fb9-823d-ec04ca679450.86c23858.png" alt="image.png" data-fancybox="gallery"></p><p>其实这才是查询参数最终携带的位置</p></li><li><p>所以, 我们是否可以自己拼接在url?后面, 不劳烦axios了?</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// 目标: 了解下params参数的本质</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// 格式: url地址?参数名=值&amp;参数名=值</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">     url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/area?pname=辽宁省&amp;cname=大连市&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">     method: </span><span style="color:#A5D6FF;">&#39;GET&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">     </span><span style="color:#8B949E;">// params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">     </span><span style="color:#8B949E;">//     pname: &#39;辽宁省&#39;, // 告诉后台, 我要获取辽宁省下的城市列表</span></span>
<span class="line"><span style="color:#C9D1D9;">     </span><span style="color:#8B949E;">//     cname: &#39;大连市&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">     </span><span style="color:#8B949E;">// }</span></span>
<span class="line"><span style="color:#C9D1D9;">  }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">     console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(result);</span></span>
<span class="line"><span style="color:#C9D1D9;">  })</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>答案是可以的, 但是, 我们还是用params写起来更轻松, 所以这个点了解下即可, 它是查询参数本质写法</p></li><li><p>但是刚刚查看的时候, 发现URL上的参数不是中文, 而是一堆<strong>乱码</strong> （url编码）</p><div class="danger custom-block"><p class="custom-block-title">注意</p><p>原因: 网络标准协议中却规定了 URL 中只能包含英文字符, 所以浏览器会自动把url上的中文转成url编码携带给服务器 格式: %xx%xx%xx 代表一位中文汉字 但是服务器会做解码所以前端正常写中文也没问题</p></div></li></ol><h3 id="url编码api" tabindex="-1">URL编码API <a class="header-anchor" href="#url编码api" aria-hidden="true">#</a></h3><p>JS中也有进行URL编码和解码的内置方法, 直接使用 注意: 只会对中文和空格和特殊符号转换, 英文数字不会转换</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 目标: URL编码</span></span>
<span class="line"><span style="color:#8B949E;">// 原因: url中不能出现中文, 会被自动转码</span></span>
<span class="line"><span style="color:#8B949E;">// JS内置了2个方法可以自己处理url编码/解码</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// encodeURI</span></span>
<span class="line"><span style="color:#8B949E;">// 作用：中文 -&gt; url编码</span></span>
<span class="line"><span style="color:#8B949E;">// 语法: encodeURI(中文字符串)</span></span>
<span class="line"><span style="color:#8B949E;">// 返回值: url编码字符串</span></span>
<span class="line"><span style="color:#8B949E;">// 示例：</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> str </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;辽宁省&#39;</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> urlStr </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">encodeURI</span><span style="color:#C9D1D9;">(str)</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(urlStr);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// decodeURI</span></span>
<span class="line"><span style="color:#8B949E;">// 作用：把url编码解码还原成中文</span></span>
<span class="line"><span style="color:#8B949E;">// 语法: decodeURI(url编码字符串)</span></span>
<span class="line"><span style="color:#8B949E;">// 返回值: 中文字符串</span></span>
<span class="line"><span style="color:#8B949E;">// 示例：</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> zhStr </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">decodeURI</span><span style="color:#C9D1D9;">(urlStr)</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(zhStr);</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="小结-9" tabindex="-1">小结 <a class="header-anchor" href="#小结-9" aria-hidden="true">#</a></h3><ol><li><p>查询参数的本质是什么?</p><details><summary>答案</summary><ul><li> 在url?后面拼接的参数名和值 </li></ul></details></li><li><p>什么是url编码?</p><details><summary>答案</summary><ul><li> 浏览器会把url中文和特殊符号转成%xx表现形式 </li></ul></details></li></ol><h2 id="案例-新闻列表-整体分析" tabindex="-1">案例-新闻列表-整体分析 <a class="header-anchor" href="#案例-新闻列表-整体分析" aria-hidden="true">#</a></h2><p><img src="/tingweipeng/assets/1668050565673-0a20249d-c93e-42b7-b4a2-9fde1adb142b.ea9ae5c2.png" alt="image.png" data-fancybox="gallery"></p><h3 id="目标-11" tabindex="-1">目标 <a class="header-anchor" href="#目标-11" aria-hidden="true">#</a></h3><p>根据需求效果, 完成新闻列表数据铺设</p><h3 id="分析" tabindex="-1">分析 <a class="header-anchor" href="#分析" aria-hidden="true">#</a></h3><ol><li>发axios请求数据</li><li>将数据生成标签，并铺设页面</li></ol><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ie=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;案例_新闻列表&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 导入样式表 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.news-item</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">border</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">solid</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">#eee</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">700</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">margin-bottom</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">5</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.thumb</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">block</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">230</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">140</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">background-color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#ccc</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">margin-right</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.right-box</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">flex-direction</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">column</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">justify-content</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">space-between</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">12</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.title</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">font-weight</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">normal</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.tags</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">block</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">float</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">left</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">background-color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#F0F0F0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">line-height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">border-radius</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">margin-right</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">8</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.footer</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">justify-content</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">space-between</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 新闻列表 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;news-list&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 新闻的 item 项 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;news-item&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;thumb&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;http://123.57.109.30:3006/images/5.webp&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;right-box&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#8B949E;">&lt;!-- 新闻标题 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;title&quot;</span><span style="color:#C9D1D9;">&gt;5G商用在即，三大运营商营收持续下降&lt;/</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;footer&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">              </span><span style="color:#8B949E;">&lt;!-- 新闻来源 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">              &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;胡润百富&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span><span style="color:#79C0FF;">&amp;nbsp;&amp;nbsp;</span></span>
<span class="line"><span style="color:#C9D1D9;">              </span><span style="color:#8B949E;">&lt;!-- 发布日期 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">              &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;2019-10-28 10:14:38&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#8B949E;">&lt;!-- 评论数量 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;评论数：66&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br></div></div><h3 id="发请求取回来数据" tabindex="-1">发请求取回来数据 <a class="header-anchor" href="#发请求取回来数据" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 目标: 获取新闻列表数据, 铺设到页面</span></span>
<span class="line"><span style="color:#8B949E;">// 1. 先html+css, 写一套</span></span>
<span class="line"><span style="color:#8B949E;">// 2. 准备数据, 引入axios</span></span>
<span class="line"><span style="color:#8B949E;">// 3. 调用axios传入url地址并接收数据</span></span>
<span class="line"><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">  url: </span><span style="color:#A5D6FF;">&#39;http://ajax-base-api-t.itheima.net/api/news&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">  method: </span><span style="color:#A5D6FF;">&#39;GET&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// 4. 打印观察数据</span></span>
<span class="line"><span style="color:#C9D1D9;"> console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;从服务器请求回来的数据是&#39;</span><span style="color:#C9D1D9;">, result)</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="要访问两次data属性" tabindex="-1">要访问两次data属性 <a class="header-anchor" href="#要访问两次data属性" aria-hidden="true">#</a></h3><p>axios在服务器返回的数据的基础之上又加了一层data</p><blockquote><p>饭店： 包子 自己打包： 包子 + 塑料袋 外卖打包： 包子 + 塑料袋 + 外卖袋</p></blockquote><h3 id="小结-10" tabindex="-1">小结 <a class="header-anchor" href="#小结-10" aria-hidden="true">#</a></h3><ol><li><p>获取数据的流程是？</p><details><summary>答案</summary><ul><li> 查看接口文档； 填入url, method </li></ul></details></li><li><p>为啥写两次data？</p><details><summary>答案</summary><ul><li> axios自己包装了一层 </li></ul></details></li></ol><h2 id="案例-新闻列表-数据渲染" tabindex="-1">案例-新闻列表-数据渲染 <a class="header-anchor" href="#案例-新闻列表-数据渲染" aria-hidden="true">#</a></h2><p>核心代码</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ie=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- 导入样式表 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./assets/news.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- 新闻列表 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;news-list&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 新闻的 item 项 --&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- 导入axios --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">list</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#news-list&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 步骤:</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1. 获取数据 ==&gt; 通过 axios 发送GET请求</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//           请求地址: https://ajax-base-api-t.itheima.net/api/news</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. 渲染页面</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1. 获取数据 ==&gt; 通过 axios 发送GET请求</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">      url: </span><span style="color:#A5D6FF;">&#39;https://ajax-base-api-t.itheima.net/api/news&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      method: </span><span style="color:#A5D6FF;">&#39;get&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 2. 渲染页面</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.data</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(data)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 调用渲染函数</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(data)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 封装 渲染函数</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      list.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> data.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;div class=&quot;news-item&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;img class=&quot;thumb&quot; src=&quot;https://ajax-base-api-t.itheima.net${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">img</span><span style="color:#A5D6FF;">}&quot; alt=&quot;&quot; /&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;div class=&quot;right-box&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">              &lt;!-- 新闻标题 --&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">              &lt;h1 class=&quot;title&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">title</span><span style="color:#A5D6FF;">}&lt;/h1&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">              &lt;div class=&quot;footer&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                &lt;div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                  &lt;!-- 新闻来源 --&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                  &lt;span&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">source</span><span style="color:#A5D6FF;">}&lt;/span&gt;&amp;nbsp;&amp;nbsp;</span></span>
<span class="line"><span style="color:#A5D6FF;">                  &lt;!-- 发布日期 --&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                  &lt;span&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">time</span><span style="color:#A5D6FF;">}&lt;/span&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                &lt;!-- 评论数量 --&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                &lt;span&gt;评论数：${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">cmtcount</span><span style="color:#A5D6FF;">}&lt;/span&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">              &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        `</span></span>
<span class="line"><span style="color:#C9D1D9;">      }).</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br></div></div><h2 id="语法-axios新增数据" tabindex="-1">语法-axios新增数据 <a class="header-anchor" href="#语法-axios新增数据" aria-hidden="true">#</a></h2><h3 id="目标-12" tabindex="-1">目标 <a class="header-anchor" href="#目标-12" aria-hidden="true">#</a></h3><ul><li>掌握请求的其他方式</li><li>完成添加图书的接口使用</li></ul><h3 id="提问" tabindex="-1">提问 <a class="header-anchor" href="#提问" aria-hidden="true">#</a></h3><p>前面都是在从服务器索要数据, 我们前端是否能给服务器发送点数据, 保存在服务器里呢?</p><p>答案是可以的, 一般请求方式用的是<code>POST</code></p><h3 id="_5种请求方式" tabindex="-1">5种请求方式 <a class="header-anchor" href="#_5种请求方式" aria-hidden="true">#</a></h3><p>浏览器在请求服务器上的数据时，根据操作性质的不同，理想状态下可以分为 5 种常见的请求方式：</p><blockquote><p>工作时：后端规定什么请求方式，前端要按规定使用</p></blockquote><p><img src="/tingweipeng/assets/1667958600406-1837604b-280d-470e-bd0c-414592647c02.1ad5326f.png" alt="19.png" data-fancybox="gallery"></p><h3 id="axios新增数据的语法" tabindex="-1">axios新增数据的语法 <a class="header-anchor" href="#axios新增数据的语法" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">    url: </span><span style="color:#A5D6FF;">&#39;请求地址&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    method: </span><span style="color:#A5D6FF;">&#39;POST&#39;</span><span style="color:#C9D1D9;">,    </span><span style="color:#8B949E;">// 一般来讲是POST</span></span>
<span class="line"><span style="color:#C9D1D9;">    data: {            </span><span style="color:#8B949E;">// data: 对应要发给后端数据</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 后端规定的参数名: 前端发给后端的值</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(result);</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="示例" tabindex="-1">示例 <a class="header-anchor" href="#示例" aria-hidden="true">#</a></h3><p>下面以添加书籍为例, 我们使用一次POST请求, , 并引入axios编写代码</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 目标: 用POST方式添加书籍信息</span></span>
<span class="line"><span style="color:#8B949E;">// url地址: http://ajax-api.itheima.net/api/books</span></span>
<span class="line"><span style="color:#8B949E;">// 请求方式: POST</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// 参数名</span></span>
<span class="line"><span style="color:#8B949E;">// bookname: 图书名字</span></span>
<span class="line"><span style="color:#8B949E;">// author: 作者名字</span></span>
<span class="line"><span style="color:#8B949E;">// publisher: 出版社名字 </span></span>
<span class="line"><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">    url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/books&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    method: </span><span style="color:#A5D6FF;">&#39;POST&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// data: 对应要发给后端数据</span></span>
<span class="line"><span style="color:#C9D1D9;">    data: {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 后端规定的参数名: 前端发给后端的值</span></span>
<span class="line"><span style="color:#C9D1D9;">        bookname: </span><span style="color:#A5D6FF;">&#39;黑马前端&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        author: </span><span style="color:#A5D6FF;">&#39;老李&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        publisher: </span><span style="color:#A5D6FF;">&#39;北京顺义出版社&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(result);</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="观察结果" tabindex="-1">观察结果 <a class="header-anchor" href="#观察结果" aria-hidden="true">#</a></h3><ol><li>打开浏览器Network调试工具, 检查下发送请求的方法</li></ol><p><img src="/tingweipeng/assets/1667964583101-3f333a21-cdd9-4460-91a4-59bea09d89b9.1c940da6.png" alt="image.png" data-fancybox="gallery"></p><ol start="2"><li>查看传递的请求体参数和值</li></ol><blockquote><p>小提示: 点击 view source 可以查看数据原始的样子 (是个JSON字符串) 携带给后端</p></blockquote><p><img src="/tingweipeng/assets/1667964543978-ba9407b8-f7e3-4e4f-9f0a-3b74b356e8bb.3cd95e82.png" alt="image.png" data-fancybox="gallery"></p><ol start="3"><li>查看axios接收的结果对象 <img src="/tingweipeng/assets/1667964565786-a1df0611-b390-4689-8e2a-0fc742cb2b02.cf74e2b2.png" alt="image.png" data-fancybox="gallery"></li></ol><h3 id="小结-11" tabindex="-1">小结 <a class="header-anchor" href="#小结-11" aria-hidden="true">#</a></h3><ol><li><p>前端向服务器请求方法, 有几种？</p><details><summary>答案</summary><ul><li>GET, POST, PUT, DELETE, PATCH等</li></ul></details></li><li><p>前端向服务器请求方法get和post分别表示什么操作？</p><details><summary>答案</summary><ul><li>get： 表示查询； post：表示新增</li></ul></details></li></ol><h2 id="案例-用户登录" tabindex="-1">案例-用户登录 <a class="header-anchor" href="#案例-用户登录" aria-hidden="true">#</a></h2><h3 id="目标-13" tabindex="-1">目标 <a class="header-anchor" href="#目标-13" aria-hidden="true">#</a></h3><p>完成用户登录功能 <img src="/tingweipeng/assets/1667964902115-3e1d0893-4ed7-48c3-87ed-f395a571e105.bfaa2780.gif" alt="登录.gif" data-fancybox="gallery"></p><h3 id="讲解-1" tabindex="-1">讲解 <a class="header-anchor" href="#讲解-1" aria-hidden="true">#</a></h3><ol><li>登录功能相关参数 <ul><li>url地址: <a href="http://ajax-api.itheima.net/api/login" target="_blank" rel="noreferrer">http://ajax-api.itheima.net/api/login</a></li><li>请求方式: POST</li><li>参数名 <ul><li>username - 用户名(只能是&quot;admin&quot;)</li><li>password - 密码(只能是&quot;123456&quot;)</li></ul></li></ul></li><li>新建案例_用户登录.html文件, 并复制此html标签和样式, 在这基础上完成功能效果</li><li>根据需求, 梳理思路, 完成功能效果</li></ol><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;案例_用户登录.html&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">background-color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#f8f8f8</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.login-box</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">400</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">position</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">fixed</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">left</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transform</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">translateX</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">-50</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">border</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">solid</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">#efefef</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">border-radius</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">4</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">box-shadow</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">5</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">#cfcfcf</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">background-color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#fff</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transition</span><span style="color:#C9D1D9;">: box-shadow </span><span style="color:#79C0FF;">0.3</span><span style="color:#FF7B72;">s</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ease</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.login-box:hover</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transition</span><span style="color:#C9D1D9;">: box-shadow </span><span style="color:#79C0FF;">0.3</span><span style="color:#FF7B72;">s</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ease</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">box-shadow</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">#cfcfcf</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;login-box&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-group&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">for</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;username&quot;</span><span style="color:#C9D1D9;">&gt;Account&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 账号 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;username&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">autocomplete</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;off&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">small</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;emailHelp&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-text text-muted&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        The available account is&lt;</span><span style="color:#7EE787;">strong</span><span style="color:#C9D1D9;">&gt;admin&lt;/</span><span style="color:#7EE787;">strong</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">small</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-group&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 密码 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">for</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;">&gt;Password&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">small</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;emailHelp&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-text text-muted&quot;</span><span style="color:#C9D1D9;">&gt;The available password is</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">strong</span><span style="color:#C9D1D9;">&gt;123456&lt;/</span><span style="color:#7EE787;">strong</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">small</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;submit&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btnLogin&quot;</span><span style="color:#C9D1D9;">&gt;Submit&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br></div></div><h3 id="核心代码" tabindex="-1">核心代码 <a class="header-anchor" href="#核心代码" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 目标: 完成登录效果</span></span>
<span class="line"><span style="color:#8B949E;">// 写任何需求的经验(套路)</span></span>
<span class="line"><span style="color:#8B949E;">// (1): 明确目标和效果后, 准备html+css</span></span>
<span class="line"><span style="color:#8B949E;">// (2): 铺设数据/修改变量名</span></span>
<span class="line"><span style="color:#8B949E;">// (3): JS交互, 思路来源于画面, 小步一步步实现</span></span>
<span class="line"><span style="color:#8B949E;">// (4): 前端准备好数据后, 调用后端接口(如果需要)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// 1. 准备好标签和样式(从md复制)</span></span>
<span class="line"><span style="color:#8B949E;">// 2. 登录按钮-&gt;点击事件</span></span>
<span class="line"><span style="color:#C9D1D9;">document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnLogin&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 3. 获取输入框值 ==&gt; value属性</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> username </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#username&#39;</span><span style="color:#C9D1D9;">).value</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> password </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#password&#39;</span><span style="color:#C9D1D9;">).value</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 4. 基于axios调用登录地址, 传递参数完成登录逻辑</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/login&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;POST&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        data: {</span></span>
<span class="line"><span style="color:#C9D1D9;">            username: username,</span></span>
<span class="line"><span style="color:#C9D1D9;">            password: password</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 响应成功进入此函数</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(result)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;恭喜你，登录成功了&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">catch</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">err</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 响应失败进入此函数</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(err)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;账号或密码错误&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><h3 id="小结-12" tabindex="-1">小结 <a class="header-anchor" href="#小结-12" aria-hidden="true">#</a></h3><ol><li><p>axios如何接收成功/失败的响应结果?</p><details><summary>答案</summary><ul><li> .then().catch() </li></ul></details></li></ol><h2 id="概念-请求报文" tabindex="-1">概念-请求报文 <a class="header-anchor" href="#概念-请求报文" aria-hidden="true">#</a></h2><h3 id="目标-14" tabindex="-1">目标 <a class="header-anchor" href="#目标-14" aria-hidden="true">#</a></h3><ul><li>了解什么是请求报文</li></ul><h3 id="讲解-2" tabindex="-1">讲解 <a class="header-anchor" href="#讲解-2" aria-hidden="true">#</a></h3><ol><li>复习下请求 <ul><li>请求:  浏览器 向  服务器 发起的一个动作过程</li></ul></li><li>一次完整的传输过程, 是一次请求对应一次响应, 在传输的过程中, 数据包就是报文 <ul><li>请求报文: 规定了浏览器 向 服务器, <strong>以什么格式</strong> 把数据<strong>发送</strong></li><li>响应报文: 规定了服务器 向 浏览器, <strong>以什么格式</strong> 把数据<strong>返回</strong></li></ul></li><li>请求报文组成 <ul><li>请求行 <ul><li>请求方式: (GET / POST / DELETE / PUT / PATCH)</li><li>请求url: 资源在服务器地址</li><li>协议版本: 默认HTTP/1.1</li></ul></li><li>请求头部: 头部参数名: 值</li><li>请求体: 携带给服务器的数据</li></ul></li></ol><p><img src="/tingweipeng/assets/1667959878914-477f912c-8e80-4931-8c9c-fd5d34efa88c.c555e577.png" alt="29.png" data-fancybox="gallery"></p><ol start="4"><li>请求头在Network调试查看 <img src="/tingweipeng/assets/1667959898203-838d8ae8-7813-413f-aa98-eb88c8a33c12.7717ae76.png" alt="30.png" data-fancybox="gallery"></li><li>请求体在这里查看 只有带了参数的请求，才有请求体。（并不是每一次请求都有） <img src="/tingweipeng/assets/1667959936926-ec039765-f6d5-455e-b7ea-45968746a382.c9c1a656.png" alt="31.png" data-fancybox="gallery"></li></ol><h3 id="小结-13" tabindex="-1">小结 <a class="header-anchor" href="#小结-13" aria-hidden="true">#</a></h3><ol><li><p>请求报文的3个组成部分?</p><details><summary>答案</summary><ul><li> 请求行, 请求头, 请求体 </li></ul></details></li></ol><h2 id="概念-响应报文" tabindex="-1">概念-响应报文 <a class="header-anchor" href="#概念-响应报文" aria-hidden="true">#</a></h2><h3 id="目标-15" tabindex="-1">目标 <a class="header-anchor" href="#目标-15" aria-hidden="true">#</a></h3><p>了解什么是响应报文</p><h3 id="讲解-3" tabindex="-1">讲解 <a class="header-anchor" href="#讲解-3" aria-hidden="true">#</a></h3><ol><li>复习下响应 <ul><li>响应:  服务器 向  浏览器 返回的一个动作过程</li></ul></li><li>响应报文组成 <ul><li>响应行 <ul><li>协议版本: 默认HTTP/1.1</li><li>响应状态码: 服务器返回的一个数字标识, 代表本次响应的状态</li><li>响应状态描述: 服务器返回的一个文字标识, 代表本次响应的描述</li></ul></li><li>响应头部: 头部参数名: 值</li><li>响应体: 服务器返回的响应数据</li></ul></li></ol><p><img src="/tingweipeng/assets/1667960009703-558ec9d1-f17b-4e1d-8507-537298577a65.3fdd720d.png" alt="32.png" data-fancybox="gallery"></p><ol start="3"><li>响应报文在Network调试查看 <img src="/tingweipeng/assets/1667960028250-ee72080f-ec66-4b02-bddc-7320520e9a71.ddf70caa.png" alt="33.png" data-fancybox="gallery"></li><li>响应体在这里查看 <img src="/tingweipeng/assets/1667960047570-e7df2bb5-1229-4f85-b800-24829b2ba2ff.d68f3888.png" alt="34.png" data-fancybox="gallery"></li></ol><h3 id="小结-14" tabindex="-1">小结 <a class="header-anchor" href="#小结-14" aria-hidden="true">#</a></h3><ol><li><p>响应报文的3个组成部分?</p><details><summary>答案</summary><ul><li> 响应行, 响应头部, 响应体 </li></ul></details></li></ol><h2 id="概念-响应码" tabindex="-1">概念-响应码 <a class="header-anchor" href="#概念-响应码" aria-hidden="true">#</a></h2><h3 id="目标-16" tabindex="-1">目标 <a class="header-anchor" href="#目标-16" aria-hidden="true">#</a></h3><p>了解每个响应码数字对应的含义</p><h3 id="讲解-4" tabindex="-1">讲解 <a class="header-anchor" href="#讲解-4" aria-hidden="true">#</a></h3><ol><li>常见的响应状态码如下 <img src="/tingweipeng/assets/1667960076514-05c4b6c0-2e7e-4ed5-bb40-5c745c28b764.5bad50b9.png" alt="35.png" data-fancybox="gallery"></li><li>各种响应状态码的查看 <ul><li>200: 比如我们前面案例里的Ajax的请求, 正确的响应状态就为200</li><li>302: 比如先打开Network, <a href="http://xn--baidu-8v5hg095a59qa.com" target="_blank" rel="noreferrer">再访问baidu.com</a>, 会出现302重定向</li><li>304: 比如先打开Network, 再访问<a href="https://image.baidu.com/" target="_blank" rel="noreferrer">https://image.baidu.com/</a>, 有的css, js, 图片文件就会有缓存</li><li>4xx: 可以在后续做案例/项目中遇到</li><li>500: 比如先打开Network, 再访问<a href="http://pcapi-xiaotuxian-front-devtest.itheima.net/login" target="_blank" rel="noreferrer">http://pcapi-xiaotuxian-front-devtest.itheima.net/login</a>, 会出现500</li></ul></li></ol><p>其实无论出现哪种情况, 你要掌握的是每个状态码, 是服务器想要告诉你什么含义即可</p><h3 id="小结-15" tabindex="-1">小结 <a class="header-anchor" href="#小结-15" aria-hidden="true">#</a></h3><ol><li><p>什么是响应状态码?</p><details><summary>答案</summary><ul><li> 3位数字组成，表示本次请求的状态，每个数字都有自己的含义 </li></ul></details></li><li><p>那些状态码表示失败?</p><details><summary>答案</summary><ul><li> 4和5开头的状态码 </li></ul></details></li></ol><h2 id="概念-业务状态码" tabindex="-1">概念-业务状态码 <a class="header-anchor" href="#概念-业务状态码" aria-hidden="true">#</a></h2><h3 id="目标-17" tabindex="-1">目标 <a class="header-anchor" href="#目标-17" aria-hidden="true">#</a></h3><p>了解响应状态码和业务状态码区别</p><h3 id="如何区分是响应状态码还是业务状态码呢" tabindex="-1">如何区分是响应状态码还是业务状态码呢？ <a class="header-anchor" href="#如何区分是响应状态码还是业务状态码呢" aria-hidden="true">#</a></h3><p>正确区分响应状态码和业务状态码的不同，是保证使用 Ajax 不迷茫的必要前提。从如下 3 个方面进行区分：</p><ol><li>位置</li><li>结果</li><li>通用性</li></ol><h3 id="位置不同" tabindex="-1">位置不同 <a class="header-anchor" href="#位置不同" aria-hidden="true">#</a></h3><p>响应状态码：在响应报文的状态行中</p><p>业务状态码：在响应报文的响应体中</p><p><img src="/tingweipeng/assets/image-20230203151246067.9b1441e7.png" alt="image-20230203151246067" data-fancybox="gallery"></p><h3 id="结果不同" tabindex="-1">结果不同 <a class="header-anchor" href="#结果不同" aria-hidden="true">#</a></h3><p>响应状态码：只能表示这次请求和响应成功与否</p><p>业务状态码：用来表示这次业务处理的成功与否</p><p><img src="/tingweipeng/assets/1667965222063-00db5403-fc3e-4fed-8325-eaa8355918b2.0628cf54.png" alt="" data-fancybox="gallery"></p><h3 id="通用性不同" tabindex="-1">通用性不同： <a class="header-anchor" href="#通用性不同" aria-hidden="true">#</a></h3><p>响应状态码：http协议规定，每个数值都有固定含义，具有通用性</p><p>业务状态码：后端程序员约定的，每个项目业务值不固定，不具有通用性</p><p><img src="/tingweipeng/assets/1667965236513-753b6b0c-deff-447d-b174-f9b2bfd36858.34ec2b34.png" alt="" data-fancybox="gallery"></p><h3 id="示例代码-3" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-3" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;13-16.概念_业务状态码&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">background-color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#f8f8f8</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">.login-box</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">400</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">position</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">fixed</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">left</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">transform</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">translateX</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">-50</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">border</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">solid</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">#efefef</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">border-radius</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">4</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">box-shadow</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">5</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">#cfcfcf</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">background-color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#fff</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">transition</span><span style="color:#C9D1D9;">: box-shadow </span><span style="color:#79C0FF;">0.3</span><span style="color:#FF7B72;">s</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ease</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">.login-box:hover</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">transition</span><span style="color:#C9D1D9;">: box-shadow </span><span style="color:#79C0FF;">0.3</span><span style="color:#FF7B72;">s</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ease</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">box-shadow</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">#cfcfcf</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;login-box&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-group&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">for</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;username&quot;</span><span style="color:#C9D1D9;">&gt;Account&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#8B949E;">&lt;!-- 账号 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;username&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">autocomplete</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;off&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">small</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;emailHelp&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-text text-muted&quot;</span><span style="color:#C9D1D9;">&gt;The available account is &lt;</span><span style="color:#7EE787;">strong</span><span style="color:#C9D1D9;">&gt;admin&lt;/</span><span style="color:#7EE787;">strong</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">small</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-group&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#8B949E;">&lt;!-- 密码 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">for</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;">&gt;Password&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">small</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;emailHelp&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-text text-muted&quot;</span><span style="color:#C9D1D9;">&gt;The available password is &lt;</span><span style="color:#7EE787;">strong</span><span style="color:#C9D1D9;">&gt;123456&lt;/</span><span style="color:#7EE787;">strong</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">small</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;submit&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btnLogin&quot;</span><span style="color:#C9D1D9;">&gt;Submit&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 目标: 区分&quot;响应&quot;状态码和&quot;业务&quot;状态码的区别</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 成功 -&gt; 状态码200 -&gt; 进then</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 失败 -&gt; 状态码200 -&gt; 进then</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 后续用响应体数据对象, code字段值判断</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 这种方式就叫业务状态码</span></span>
<span class="line"><span style="color:#C9D1D9;">        document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnLogin&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> username </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#username&#39;</span><span style="color:#C9D1D9;">).value</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> password </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#password&#39;</span><span style="color:#C9D1D9;">).value</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">                url: </span><span style="color:#A5D6FF;">&#39;http://big-event-vue-api-t.itheima.net/api/login&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">                method: </span><span style="color:#A5D6FF;">&#39;POST&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">                data: {</span></span>
<span class="line"><span style="color:#C9D1D9;">                    username: username,</span></span>
<span class="line"><span style="color:#C9D1D9;">                    password: password</span></span>
<span class="line"><span style="color:#C9D1D9;">                }</span></span>
<span class="line"><span style="color:#C9D1D9;">            }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">                console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(result);</span></span>
<span class="line"><span style="color:#C9D1D9;">                </span><span style="color:#8B949E;">// 响应成功进入此函数</span></span>
<span class="line"><span style="color:#C9D1D9;">                </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (result.data.code </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">                    </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;恭喜你，登录成功了&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">                } </span><span style="color:#FF7B72;">else</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">                    </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;账号或密码错误&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">                }</span></span>
<span class="line"><span style="color:#C9D1D9;">            })</span></span>
<span class="line"><span style="color:#C9D1D9;">        })</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br></div></div><h3 id="小结-16" tabindex="-1">小结 <a class="header-anchor" href="#小结-16" aria-hidden="true">#</a></h3><ol><li><p>响应状态码和业务码, 功能区别?</p><details><summary>答案</summary><ul><li>响应状态码判断请求响应过程是否成功</li><li>业务状态码判断业务处理过程是否成功</li></ul></details></li><li><p>两种码分别有什么特点?</p><details><summary>答案</summary><ul><li>响应状态码数值固定, 在响应报文状态行中</li><li>业务状态码数值后台定, 在响应报文的响应体中</li></ul></details></li></ol><h2 id="水果列表" tabindex="-1">水果列表 <a class="header-anchor" href="#水果列表" aria-hidden="true">#</a></h2><h3 id="目标-18" tabindex="-1">目标 <a class="header-anchor" href="#目标-18" aria-hidden="true">#</a></h3><p>能够通过axios发送ajax请求实现水果列表</p><p><img src="/tingweipeng/assets/image-20230203175742001.7b6a6603.png" alt="image-20230203175742001" data-fancybox="gallery"></p><h3 id="步骤" tabindex="-1">步骤 <a class="header-anchor" href="#步骤" aria-hidden="true">#</a></h3><ol><li>打开页面需要发送ajax</li><li>根据服务器响应回来的数据 渲染页面</li></ol><h3 id="示例代码-4" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-4" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./css/inputnumber.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./css/index.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;水果列表&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;app-container&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;app&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 顶部banner --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;banner-box&quot;</span><span style="color:#C9D1D9;">&gt;&lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./img/fruit.jpg&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;"> /&gt;&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 面包屑 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;breadcrumb&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;🏠&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      /</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;水果列表&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- table --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;main&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;table&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 头部 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;thead&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;tr&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;th&quot;</span><span style="color:#C9D1D9;">&gt;名字&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;th&quot;</span><span style="color:#C9D1D9;">&gt;图片&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;th&quot;</span><span style="color:#C9D1D9;">&gt;简介&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;th&quot;</span><span style="color:#C9D1D9;">&gt;操作&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;tbody&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#8B949E;">&lt;!-- &lt;div class=&quot;tr&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">            &lt;div class=&quot;td&quot;&gt;火龙果&lt;/div&gt;</span></span>
<span class="line"><span style="color:#8B949E;">            &lt;div class=&quot;td&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">              &lt;img alt=&quot;&quot; src=&quot;./img/火龙果.png&quot; /&gt;</span></span>
<span class="line"><span style="color:#8B949E;">            &lt;/div&gt;</span></span>
<span class="line"><span style="color:#8B949E;">            &lt;div class=&quot;td&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">              &lt;span class=&quot;my-input__inner count&quot;&gt;一种好吃的水果&lt;/span&gt;</span></span>
<span class="line"><span style="color:#8B949E;">            &lt;/div&gt;</span></span>
<span class="line"><span style="color:#8B949E;">            &lt;div class=&quot;td&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">              &lt;a href=&quot;javascript:;&quot; class=&quot;info&quot;&gt;查看详情&lt;/a&gt;</span></span>
<span class="line"><span style="color:#8B949E;">            &lt;/div&gt;</span></span>
<span class="line"><span style="color:#8B949E;">          &lt;/div&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- 必须先导入 axios 的库文件，然后就可以调用 axios() 函数了 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// =================================== 目标 ===================================</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 发起 GET 请求，获取水果列表</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// https://autumnfish.cn/fruitApi/fruits</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      1. 打开页面需要发送ajax </span></span>
<span class="line"><span style="color:#8B949E;">      2. 根据服务器响应回来的数据 渲染页面</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">      url: </span><span style="color:#A5D6FF;">&#39;https://autumnfish.cn/fruitApi/fruits&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      method: </span><span style="color:#A5D6FF;">&#39;get&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 对 res 进行解构</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// const { data } = res</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (res.status </span><span style="color:#FF7B72;">!==</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">200</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(res.msg)</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 成功 需要渲染页面</span></span>
<span class="line"><span style="color:#C9D1D9;">      document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.tbody&#39;</span><span style="color:#C9D1D9;">).innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">        &lt;div class=&quot;tr&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;div class=&quot;td&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">name</span><span style="color:#A5D6FF;">}&lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;div class=&quot;td&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;img alt=&quot;&quot; src=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">icon</span><span style="color:#A5D6FF;">}&quot; /&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;div class=&quot;td&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;span class=&quot;my-input__inner count&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">info</span><span style="color:#A5D6FF;">}&lt;/span&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;div class=&quot;td&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;a href=&quot;javascript:;&quot; class=&quot;info&quot;&gt;查看详情&lt;/a&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">      `</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br></div></div><h2 id="水果详情" tabindex="-1">水果详情 <a class="header-anchor" href="#水果详情" aria-hidden="true">#</a></h2><h3 id="目标-19" tabindex="-1">目标 <a class="header-anchor" href="#目标-19" aria-hidden="true">#</a></h3><p>能够通过axios发送ajax请求实现水果详情</p><p><img src="/tingweipeng/assets/image-20230203180143501.08f89d44.png" alt="image-20230203180143501" data-fancybox="gallery"></p><h3 id="步骤-1" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-1" aria-hidden="true">#</a></h3><ol><li>在点击首页查看详情按钮将水果的id传递到详情页面</li><li>发送 ajax获取数据</li><li>渲染页面</li><li>解决bug</li></ol><h3 id="示例代码-5" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-5" aria-hidden="true">#</a></h3><ol><li><p>首页</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./css/inputnumber.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./css/index.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;水果列表&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;app-container&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;app&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 顶部banner --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;banner-box&quot;</span><span style="color:#C9D1D9;">&gt;&lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./img/fruit.jpg&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;"> /&gt;&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 面包屑 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;breadcrumb&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;🏠&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      /</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;水果列表&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- table --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;main&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;table&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 头部 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;thead&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;tr&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;th&quot;</span><span style="color:#C9D1D9;">&gt;名字&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;th&quot;</span><span style="color:#C9D1D9;">&gt;图片&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;th&quot;</span><span style="color:#C9D1D9;">&gt;简介&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;th&quot;</span><span style="color:#C9D1D9;">&gt;操作&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;tbody&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;tr&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;td&quot;</span><span style="color:#C9D1D9;">&gt;火龙果&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;td&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">              &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./img/火龙果.png&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;td&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">              &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;my-input__inner count&quot;</span><span style="color:#C9D1D9;">&gt;一种好吃的水果&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;td&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">              &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;info&quot;</span><span style="color:#C9D1D9;">&gt;查看详情&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- 导入axios --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      1. 展示水果列表</span></span>
<span class="line"><span style="color:#8B949E;">        1.1 发送ajax</span></span>
<span class="line"><span style="color:#8B949E;">        1.2 渲染</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">      url: </span><span style="color:#A5D6FF;">&#39;https://autumnfish.cn/fruitApi/fruits&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      method: </span><span style="color:#A5D6FF;">&#39;get&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 判断是否获取成功 </span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (res.status </span><span style="color:#FF7B72;">!==</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">200</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(res.msg)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 代表获取成功</span></span>
<span class="line"><span style="color:#C9D1D9;">      document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.tbody&#39;</span><span style="color:#C9D1D9;">).innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">        &lt;div class=&quot;tr&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;div class=&quot;td&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">name</span><span style="color:#A5D6FF;">}&lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;div class=&quot;td&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;img alt=&quot;&quot; src=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">icon</span><span style="color:#A5D6FF;">}&quot; /&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;div class=&quot;td&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;span class=&quot;my-input__inner count&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">info</span><span style="color:#A5D6FF;">}&lt;/span&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;div class=&quot;td&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;a class=&quot;info&quot; href=&quot;./detail.html?id=${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}&quot; target=&quot;_blank&quot;&gt;查看详情&lt;/a&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">      `</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br></div></div></li><li><p>详情页</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ie=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#7EE787;">*</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">list-style</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">none</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.info</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">inline-block</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">100</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#000</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.info</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.story</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.info</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.story</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">p</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">30</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">left</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">line-height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">30</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-weight</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">500</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-indent</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">2</span><span style="color:#FF7B72;">em</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.name</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">line-height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">30</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">border-bottom</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">solid</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">#ccc</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-weight</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">bold</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">15</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.img</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">15</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">max-height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">45</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">overflow</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">hidden</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">/* 伸缩盒子实现图片居中 */</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">align-items</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">justify-content</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">vertical-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">middle</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.img</span><span style="color:#FF7B72;">&gt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">120</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">120</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">object-fit</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">cover</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">18</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;info&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- &lt;div class=&quot;bg&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;div class=&quot;name&quot; style=&quot;color:red&quot;&gt;水果名称:桃子&lt;/div&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;div class=&quot;img&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">        &lt;img src=&quot;./img/火龙果.png&quot; alt=&quot;&quot; /&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;/div&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;p style=&quot;color:red&quot;&gt;水果信息：蔷薇目蔷薇科植物&lt;/p&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;div class=&quot;story&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">        &lt;h5&gt;详细介绍：&lt;/h5&gt;</span></span>
<span class="line"><span style="color:#8B949E;">        &lt;p&gt;</span></span>
<span class="line"><span style="color:#8B949E;">          桃（学名：Amygdalus persica</span></span>
<span class="line"><span style="color:#8B949E;">          L.）：蔷薇科、桃属植物。落叶小乔木；叶为窄椭圆形至披针形，长15厘米，宽4厘米，先端成长而细的尖端，边缘有细齿，暗绿色有光泽，叶基具有蜜腺；树皮暗灰色，随年龄增长出现裂缝；花单生，从淡至深粉红或红色，有时为白色，有短柄，直径4厘米，早春开花；近球形核果，表面有毛茸，肉质可食，为橙黄色泛红色，直径7.5厘米，有带深麻点和沟纹的核，内含白色种子。</span></span>
<span class="line"><span style="color:#8B949E;">          是一种果实作为水果的落叶小乔木，花可以观赏，果实多汁，可以生食或制桃脯、罐头等，核仁也可以食用。果肉有白色和黄色的，桃有多种品种，一般果皮有毛，“油桃”的果皮光滑；“蟠桃”果实是扁盘状；“碧桃”是观赏花用桃树，有多种形式的花瓣。</span></span>
<span class="line"><span style="color:#8B949E;">          原产中国，各省区广泛栽培。世界各地均有栽植。</span></span>
<span class="line"><span style="color:#8B949E;">        &lt;/p&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;/div&gt;</span></span>
<span class="line"><span style="color:#8B949E;">    &lt;/div&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- 导入axios --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">     * 请求地址： https://autumnfish.cn/fruitApi/fruit/:id</span></span>
<span class="line"><span style="color:#8B949E;">     * 请求方法: get</span></span>
<span class="line"><span style="color:#8B949E;">     * 请求参数：id，在 url 中直接传递</span></span>
<span class="line"><span style="color:#8B949E;">     * 响应内容：json</span></span>
<span class="line"><span style="color:#8B949E;">       * icon:base64 的图片，直接设置给`src`即可使用</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1. 获取地址栏上面的 id的值 </span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> location.search.</span><span style="color:#D2A8FF;">split</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;=&#39;</span><span style="color:#C9D1D9;">)[</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 用户只能从首页进入点击 查看详情进入 该页面</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (id </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">undefined</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;请你从index.html访问&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      location.href </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;./index.html&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">      url: </span><span style="color:#A5D6FF;">`https://autumnfish.cn/fruitApi/fruit/${</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}`</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      method: </span><span style="color:#A5D6FF;">&#39;get&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 如果说 用户在 地址栏上面 随便输入了 一个id的值 让 页面跳转到首页 下面的代码不要执行</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// const status = </span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">status</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.status</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 业务状态码</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (status </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">400</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;请你从index.html访问&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        location.href </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;./index.html&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">return</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">obj</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.data</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(obj)</span></span>
<span class="line"><span style="color:#C9D1D9;">      document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.info&#39;</span><span style="color:#C9D1D9;">).innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">        &lt;div class=&quot;bg&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        &lt;div class=&quot;name&quot; style=&quot;color:red&quot;&gt;水果名称:${</span><span style="color:#C9D1D9;">obj</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">name</span><span style="color:#A5D6FF;">}&lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        &lt;div class=&quot;img&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;img src=&quot;${</span><span style="color:#C9D1D9;">obj</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">icon</span><span style="color:#A5D6FF;">}&quot; alt=&quot;&quot; /&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        &lt;p style=&quot;color:red&quot;&gt;水果信息：${</span><span style="color:#C9D1D9;">obj</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">info</span><span style="color:#A5D6FF;">}&lt;/p&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        &lt;div class=&quot;story&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;h5&gt;详细介绍：&lt;/h5&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;p&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            ${</span><span style="color:#C9D1D9;">obj</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">desc</span><span style="color:#A5D6FF;">}</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;/p&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">      &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">      `</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br></div></div></li></ol><h2 id="聊天机器人-结构分析" tabindex="-1">聊天机器人-结构分析 <a class="header-anchor" href="#聊天机器人-结构分析" aria-hidden="true">#</a></h2><h3 id="目标-20" tabindex="-1">目标 <a class="header-anchor" href="#目标-20" aria-hidden="true">#</a></h3><p>能够分析出聊天机器人结构</p><p><img src="/tingweipeng/assets/1667964984912-dc7d63d4-35ce-463a-9eb3-3175fd3b84a5.824f9472.gif" alt="聊天机器人.gif" data-fancybox="gallery"></p><h3 id="结构分析" tabindex="-1">结构分析 <a class="header-anchor" href="#结构分析" aria-hidden="true">#</a></h3><ol><li>header是头部区域</li><li>main是中间的聊天显示区域</li><li>footer是底部的消息编辑区域</li></ol><h2 id="聊天机器人-显示用户输入的内容" tabindex="-1">聊天机器人-显示用户输入的内容 <a class="header-anchor" href="#聊天机器人-显示用户输入的内容" aria-hidden="true">#</a></h2><h3 id="目标-21" tabindex="-1">目标 <a class="header-anchor" href="#目标-21" aria-hidden="true">#</a></h3><p>能够显示用户输入的内容</p><h3 id="步骤-2" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-2" aria-hidden="true">#</a></h3><ol><li>获取发送按钮注册点击事件</li><li>获取输入框里面的内容</li><li>非空判断</li><li>创建 li 标签</li><li>给创建的 li 添加类名</li><li>给创建的 li 添加内容 并且修改 span标签里面的文字</li><li>获取 ul 将 创建的 li 标签 追加 ul 的最后面</li><li>清空输入框</li></ol><h3 id="示例代码-6" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-6" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ie=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;css/reset.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;css/main.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- &lt;script src=&quot;./js/jquery-1.12.4.min.js&quot;&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color:#8B949E;">  &lt;script src=&quot;./js/scroll.js&quot;&gt;&lt;/script&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;聊天机器人&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;wrap&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 头部 Header 区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;header&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">h3</span><span style="color:#C9D1D9;">&gt;小思同学&lt;/</span><span style="color:#7EE787;">h3</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person01.png&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;icon&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 中间 聊天内容区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;main&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;talk_list&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">style</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;top: 0px;&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;talk_list&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 机器人 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;left_word&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person01.png&quot;</span><span style="color:#C9D1D9;"> /&gt; &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;嗨，最近想我没有？&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 我 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- &lt;li class=&quot;right_word&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">          &lt;img src=&quot;img/person02.png&quot; /&gt; &lt;span&gt;嗨，最近想我没有？&lt;/span&gt;</span></span>
<span class="line"><span style="color:#8B949E;">        &lt;/li&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 底部 消息编辑区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;footer&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person02.png&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;icon&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;说的什么吧...&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;input_txt&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ipt&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">value</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;发 送&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;input_sub&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btnSend&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./js/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- &lt;script src=&quot;./js/scroll.js&quot;&gt;&lt;/script&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">audio</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;voice&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">autoplay</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">style</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;display: none;&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">audio</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      1. 用户点击 发送 按钮 将输入框的数据 显示到页面</span></span>
<span class="line"><span style="color:#8B949E;">        1.1 获取发送按钮注册点击事件</span></span>
<span class="line"><span style="color:#8B949E;">        1.2 获取输入框里面的内容</span></span>
<span class="line"><span style="color:#8B949E;">        1.3 非空判断</span></span>
<span class="line"><span style="color:#8B949E;">        1.4 创建 li 标签 document.createElement(&#39;li&#39;)</span></span>
<span class="line"><span style="color:#8B949E;">        1.5 给创建的 li 添加类名</span></span>
<span class="line"><span style="color:#8B949E;">        1.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#8B949E;">        1.7 获取 ul 将 创建的 li 标签 追加 ul 的最后面</span></span>
<span class="line"><span style="color:#8B949E;">        1.8 清空输入框</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ul</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#talk_list&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1.1 获取发送按钮注册点击事件</span></span>
<span class="line"><span style="color:#C9D1D9;">    document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnSend&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.2 获取输入框里面的内容</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ipt</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#ipt&#39;</span><span style="color:#C9D1D9;">).value.</span><span style="color:#D2A8FF;">trim</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.3 非空判断</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (ipt </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;请输入内容&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.4 创建 li 标签 document.createElement(&#39;li&#39;)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">createElement</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;li&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.5 给创建的 li 添加类名</span></span>
<span class="line"><span style="color:#C9D1D9;">      li.className </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;right_word&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#C9D1D9;">      li.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`&lt;img src=&quot;img/person02.png&quot; /&gt; &lt;span&gt;${</span><span style="color:#C9D1D9;">ipt</span><span style="color:#A5D6FF;">}&lt;/span&gt;`</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.7 获取 ul 将 创建的 li 标签 追加 ul 的最后面 </span></span>
<span class="line"><span style="color:#C9D1D9;">      ul.</span><span style="color:#D2A8FF;">appendChild</span><span style="color:#C9D1D9;">(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.8 清空输入框</span></span>
<span class="line"><span style="color:#C9D1D9;">      document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#ipt&#39;</span><span style="color:#C9D1D9;">).value </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br></div></div><h3 id="小结-17" tabindex="-1">小结 <a class="header-anchor" href="#小结-17" aria-hidden="true">#</a></h3><ol><li><p>追加子元素的api是？</p><details><summary>答案</summary><ul><li> appendChild </li></ul></details></li></ol><h2 id="聊天机器人-让消息永远显示在最底部" tabindex="-1">聊天机器人-让消息永远显示在最底部 <a class="header-anchor" href="#聊天机器人-让消息永远显示在最底部" aria-hidden="true">#</a></h2><h3 id="目标-22" tabindex="-1">目标 <a class="header-anchor" href="#目标-22" aria-hidden="true">#</a></h3><p>让消息永远显示在最底部</p><h3 id="步骤-3" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-3" aria-hidden="true">#</a></h3><p>获取ul的<code>scrollHeight</code>的高度将值设置为ul向上滚动的距离</p><h3 id="示例代码-7" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-7" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ie=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;css/reset.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;css/main.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- &lt;script src=&quot;./js/jquery-1.12.4.min.js&quot;&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color:#8B949E;">  &lt;script src=&quot;./js/scroll.js&quot;&gt;&lt;/script&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;聊天机器人&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;wrap&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 头部 Header 区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;header&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">h3</span><span style="color:#C9D1D9;">&gt;小思同学&lt;/</span><span style="color:#7EE787;">h3</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person01.png&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;icon&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 中间 聊天内容区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;main&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;talk_list&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">style</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;top: 0px;&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;talk_list&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 机器人 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;left_word&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person01.png&quot;</span><span style="color:#C9D1D9;"> /&gt; &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;嗨，最近想我没有？&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 我 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- &lt;li class=&quot;right_word&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">          &lt;img src=&quot;img/person02.png&quot; /&gt; &lt;span&gt;嗨，最近想我没有？&lt;/span&gt;</span></span>
<span class="line"><span style="color:#8B949E;">        &lt;/li&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 底部 消息编辑区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;footer&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person02.png&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;icon&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;说的什么吧...&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;input_txt&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ipt&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">value</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;发 送&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;input_sub&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btnSend&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./js/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- &lt;script src=&quot;./js/scroll.js&quot;&gt;&lt;/script&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">audio</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;voice&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">autoplay</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">style</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;display: none;&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">audio</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      1. 用户点击 发送 按钮 将输入框的数据 显示到页面</span></span>
<span class="line"><span style="color:#8B949E;">        1.1 获取发送按钮注册点击事件</span></span>
<span class="line"><span style="color:#8B949E;">        1.2 获取输入框里面的内容</span></span>
<span class="line"><span style="color:#8B949E;">        1.3 非空判断</span></span>
<span class="line"><span style="color:#8B949E;">        1.4 创建 li 标签 document.createElement(&#39;li&#39;)</span></span>
<span class="line"><span style="color:#8B949E;">        1.5 给创建的 li 添加类名</span></span>
<span class="line"><span style="color:#8B949E;">        1.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#8B949E;">        1.7 获取 ul 将 创建的 li 标签 追加 ul 的最后面</span></span>
<span class="line"><span style="color:#8B949E;">        1.8 清空输入框</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      2. 用户输入内容 滚动条应该滚动到最底部</span></span>
<span class="line"><span style="color:#8B949E;">        2.1 滚动事件 scrollTop  向上滚动距离 可以给某个元素设置</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ul</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#talk_list&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1.1 获取发送按钮注册点击事件</span></span>
<span class="line"><span style="color:#C9D1D9;">    document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnSend&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.2 获取输入框里面的内容</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ipt</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#ipt&#39;</span><span style="color:#C9D1D9;">).value.</span><span style="color:#D2A8FF;">trim</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.3 非空判断</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (ipt </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;请输入内容&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.4 创建 li 标签 document.createElement(&#39;li&#39;)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">createElement</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;li&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.5 给创建的 li 添加类名</span></span>
<span class="line"><span style="color:#C9D1D9;">      li.className </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;right_word&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#C9D1D9;">      li.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`&lt;img src=&quot;img/person02.png&quot; /&gt; &lt;span&gt;${</span><span style="color:#C9D1D9;">ipt</span><span style="color:#A5D6FF;">}&lt;/span&gt;`</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.7 获取 ul 将 创建的 li 标签 追加 ul 的最后面 </span></span>
<span class="line"><span style="color:#C9D1D9;">      ul.</span><span style="color:#D2A8FF;">appendChild</span><span style="color:#C9D1D9;">(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.8 清空输入框</span></span>
<span class="line"><span style="color:#C9D1D9;">      document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#ipt&#39;</span><span style="color:#C9D1D9;">).value </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// ul.scrollTop = 200000</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 2.1 滚动事件 scrollTop  向上滚动距离 可以给某个元素设置</span></span>
<span class="line"><span style="color:#C9D1D9;">      ul.scrollTop </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> ul.scrollHeight</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br></div></div><h2 id="聊天机器人-让机器人回消息" tabindex="-1">聊天机器人-让机器人回消息 <a class="header-anchor" href="#聊天机器人-让机器人回消息" aria-hidden="true">#</a></h2><h3 id="目标-23" tabindex="-1">目标 <a class="header-anchor" href="#目标-23" aria-hidden="true">#</a></h3><p>能够实现让机器人回消息</p><h3 id="步骤-4" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-4" aria-hidden="true">#</a></h3><ol><li>建议封装函数</li><li>发送ajax 注意请求方式和请求参数</li><li>获取 服务器响应回来的数据</li><li>创建 li 标签 document.createElement(&#39;li&#39;)</li><li>给创建的 li 添加类名 left_word</li><li>给创建的 li 添加内容 并且修改 span标签里面的文字</li><li>追加 ul 的最后面</li><li>让ul滚动到最下面</li></ol><h3 id="示例代码-8" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-8" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ie=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;css/reset.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;css/main.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- &lt;script src=&quot;./js/jquery-1.12.4.min.js&quot;&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color:#8B949E;">  &lt;script src=&quot;./js/scroll.js&quot;&gt;&lt;/script&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;聊天机器人&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;wrap&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 头部 Header 区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;header&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">h3</span><span style="color:#C9D1D9;">&gt;小思同学&lt;/</span><span style="color:#7EE787;">h3</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person01.png&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;icon&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 中间 聊天内容区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;main&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;talk_list&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">style</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;top: 0px;&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;talk_list&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 机器人 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;left_word&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person01.png&quot;</span><span style="color:#C9D1D9;"> /&gt; &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;嗨，最近想我没有？&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 我 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- &lt;li class=&quot;right_word&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">          &lt;img src=&quot;img/person02.png&quot; /&gt; &lt;span&gt;嗨，最近想我没有？&lt;/span&gt;</span></span>
<span class="line"><span style="color:#8B949E;">        &lt;/li&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 底部 消息编辑区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;footer&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person02.png&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;icon&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;说的什么吧...&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;input_txt&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ipt&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">value</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;发 送&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;input_sub&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btnSend&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./js/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- &lt;script src=&quot;./js/scroll.js&quot;&gt;&lt;/script&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">audio</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;voice&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">autoplay</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">style</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;display: none;&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">audio</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      1. 用户点击 发送 按钮 将输入框的数据 显示到页面</span></span>
<span class="line"><span style="color:#8B949E;">        1.1 获取发送按钮注册点击事件</span></span>
<span class="line"><span style="color:#8B949E;">        1.2 获取输入框里面的内容</span></span>
<span class="line"><span style="color:#8B949E;">        1.3 非空判断</span></span>
<span class="line"><span style="color:#8B949E;">        1.4 创建 li 标签 document.createElement(&#39;li&#39;)</span></span>
<span class="line"><span style="color:#8B949E;">        1.5 给创建的 li 添加类名</span></span>
<span class="line"><span style="color:#8B949E;">        1.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#8B949E;">        1.7 获取 ul 将 创建的 li 标签 追加 ul 的最后面</span></span>
<span class="line"><span style="color:#8B949E;">        1.8 清空输入框</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      2. 用户输入内容 滚动条应该滚动到最底部</span></span>
<span class="line"><span style="color:#8B949E;">        2.1 滚动事件 scrollTop  向上滚动距离 可以给某个元素设置</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      3. 让机器人回消息</span></span>
<span class="line"><span style="color:#8B949E;">        3.1 建议封装函数</span></span>
<span class="line"><span style="color:#8B949E;">        3.2 发送ajax 注意请求方式和请求参数</span></span>
<span class="line"><span style="color:#8B949E;">        3.3 获取 服务器响应回来的数据</span></span>
<span class="line"><span style="color:#8B949E;">        3.4 创建 li 标签 document.createElement(&#39;li&#39;)</span></span>
<span class="line"><span style="color:#8B949E;">        3.5 给创建的 li 添加类名  left_word</span></span>
<span class="line"><span style="color:#8B949E;">        3.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#8B949E;">        3.7 追加 ul 的最后面</span></span>
<span class="line"><span style="color:#8B949E;">        3.8 让ul滚动到最下面</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ul</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#talk_list&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1.1 获取发送按钮注册点击事件</span></span>
<span class="line"><span style="color:#C9D1D9;">    document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnSend&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.2 获取输入框里面的内容</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ipt</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#ipt&#39;</span><span style="color:#C9D1D9;">).value.</span><span style="color:#D2A8FF;">trim</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.3 非空判断</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (ipt </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;请输入内容&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.4 创建 li 标签 document.createElement(&#39;li&#39;)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">createElement</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;li&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.5 给创建的 li 添加类名</span></span>
<span class="line"><span style="color:#C9D1D9;">      li.className </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;right_word&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#C9D1D9;">      li.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`&lt;img src=&quot;img/person02.png&quot; /&gt; &lt;span&gt;${</span><span style="color:#C9D1D9;">ipt</span><span style="color:#A5D6FF;">}&lt;/span&gt;`</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.7 获取 ul 将 创建的 li 标签 追加 ul 的最后面 </span></span>
<span class="line"><span style="color:#C9D1D9;">      ul.</span><span style="color:#D2A8FF;">appendChild</span><span style="color:#C9D1D9;">(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.8 清空输入框</span></span>
<span class="line"><span style="color:#C9D1D9;">      document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#ipt&#39;</span><span style="color:#C9D1D9;">).value </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// ul.scrollTop = 200000</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 2.1 滚动事件 scrollTop  向上滚动距离 可以给某个元素设置</span></span>
<span class="line"><span style="color:#C9D1D9;">      ul.scrollTop </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> ul.scrollHeight</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 调用函数</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">getMsg</span><span style="color:#C9D1D9;">(ipt)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">     3. 让机器人回消息</span></span>
<span class="line"><span style="color:#8B949E;">       3.1 建议封装函数</span></span>
<span class="line"><span style="color:#8B949E;">       3.2 发送ajax 注意请求方式和请求参数</span></span>
<span class="line"><span style="color:#8B949E;">       3.3 获取 服务器响应回来的数据</span></span>
<span class="line"><span style="color:#8B949E;">       3.4 创建 li 标签 document.createElement(&#39;li&#39;)</span></span>
<span class="line"><span style="color:#8B949E;">       3.5 给创建的 li 添加类名  left_word</span></span>
<span class="line"><span style="color:#8B949E;">       3.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#8B949E;">       3.7 追加 ul 的最后面</span></span>
<span class="line"><span style="color:#8B949E;">       3.8 让ul滚动到最下面</span></span>
<span class="line"><span style="color:#8B949E;">   */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 获取机器人回的消息</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getMsg</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> (</span><span style="color:#FFA657;">text</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 发送ajax</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/robot&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;get&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">          spoken: text</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">      }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(res.data.info.text)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">createElement</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;li&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 1.5 给创建的 li 添加类名</span></span>
<span class="line"><span style="color:#C9D1D9;">        li.className </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;left_word&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 1.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#C9D1D9;">        li.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`&lt;img src=&quot;img/person02.png&quot; /&gt; &lt;span&gt;${</span><span style="color:#C9D1D9;">res</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">data</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">info</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">text</span><span style="color:#A5D6FF;">}&lt;/span&gt;`</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 1.7 获取 ul 将 创建的 li 标签 追加 ul 的最后面 </span></span>
<span class="line"><span style="color:#C9D1D9;">        ul.</span><span style="color:#D2A8FF;">appendChild</span><span style="color:#C9D1D9;">(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">        ul.scrollTop </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> ul.scrollHeight</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br></div></div><h2 id="聊天机器人-文字转语音" tabindex="-1">聊天机器人-文字转语音 <a class="header-anchor" href="#聊天机器人-文字转语音" aria-hidden="true">#</a></h2><h3 id="目标-24" tabindex="-1">目标 <a class="header-anchor" href="#目标-24" aria-hidden="true">#</a></h3><p>能够实现将机器人回的消息转成语音</p><h3 id="步骤-5" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-5" aria-hidden="true">#</a></h3><ol><li>封装函数<code>getAudio</code></li><li>发送ajax</li><li>将服务器响应回来的语音文件写入到对应的标签中</li><li>在机器人回消息的后面对应函数</li></ol><h3 id="示例代码-9" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-9" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ie=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;css/reset.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;css/main.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- &lt;script src=&quot;./js/jquery-1.12.4.min.js&quot;&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color:#8B949E;">  &lt;script src=&quot;./js/scroll.js&quot;&gt;&lt;/script&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;聊天机器人&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;wrap&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 头部 Header 区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;header&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">h3</span><span style="color:#C9D1D9;">&gt;小思同学&lt;/</span><span style="color:#7EE787;">h3</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person01.png&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;icon&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 中间 聊天内容区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;main&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;talk_list&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">style</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;top: 0px;&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;talk_list&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 机器人 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;left_word&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person01.png&quot;</span><span style="color:#C9D1D9;"> /&gt; &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;嗨，最近想我没有？&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 我 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- &lt;li class=&quot;right_word&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">          &lt;img src=&quot;img/person02.png&quot; /&gt; &lt;span&gt;嗨，最近想我没有？&lt;/span&gt;</span></span>
<span class="line"><span style="color:#8B949E;">        &lt;/li&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 底部 消息编辑区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;footer&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person02.png&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;icon&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;说的什么吧...&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;input_txt&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ipt&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">value</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;发 送&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;input_sub&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btnSend&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./js/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- &lt;script src=&quot;./js/scroll.js&quot;&gt;&lt;/script&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">audio</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;voice&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">autoplay</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">style</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;display: none;&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">audio</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      1. 获取按钮 注册点击事件</span></span>
<span class="line"><span style="color:#8B949E;">      2. 获取输入框的内容</span></span>
<span class="line"><span style="color:#8B949E;">      3. 非空判断</span></span>
<span class="line"><span style="color:#8B949E;">      4. 创建 li 标签</span></span>
<span class="line"><span style="color:#8B949E;">      5. 将 获取的内容放到 li里面</span></span>
<span class="line"><span style="color:#8B949E;">      6. 获取ul 并将 li 追加 ul里面</span></span>
<span class="line"><span style="color:#8B949E;">      7. 将输入框里面的内容清空</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">bntSend</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnSend&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ipt</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#ipt&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ul</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#talk_list&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    bntSend.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">text</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> ipt.value.</span><span style="color:#D2A8FF;">trim</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (text.</span><span style="color:#79C0FF;">length</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;请输入内容&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">createElement</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;li&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      li.classList.</span><span style="color:#D2A8FF;">add</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;right_word&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      li.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">        &lt;img src=&quot;img/person02.png&quot; /&gt; &lt;span&gt;${</span><span style="color:#C9D1D9;">text</span><span style="color:#A5D6FF;">}&lt;/span&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">      `</span></span>
<span class="line"><span style="color:#C9D1D9;">      ul.</span><span style="color:#D2A8FF;">appendChild</span><span style="color:#C9D1D9;">(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 让消息永远在最底部</span></span>
<span class="line"><span style="color:#C9D1D9;">      ul.scrollTop </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> ul.scrollHeight</span></span>
<span class="line"><span style="color:#C9D1D9;">      ipt.value </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 调用函数</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">getMsg</span><span style="color:#C9D1D9;">(text)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 封装函数</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getMsg</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FFA657;">msg</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 发送ajax</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;http://www.liulongbin.top:3006/api/robot&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;get&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">          spoken: msg</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">      }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">text</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.data.info.text</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(text)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">createElement</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;li&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        li.classList.</span><span style="color:#D2A8FF;">add</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;left_word&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        li.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;img src=&quot;img/person01.png&quot; /&gt; &lt;span&gt;${</span><span style="color:#C9D1D9;">text</span><span style="color:#A5D6FF;">}&lt;/span&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        `</span></span>
<span class="line"><span style="color:#C9D1D9;">        ul.</span><span style="color:#D2A8FF;">appendChild</span><span style="color:#C9D1D9;">(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 让消息永远在最底部</span></span>
<span class="line"><span style="color:#C9D1D9;">        ul.scrollTop </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> ul.scrollHeight</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 调用函数</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">getAudio</span><span style="color:#C9D1D9;">(text)</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      文字转语音 </span></span>
<span class="line"><span style="color:#8B949E;">      机器人回的消息 转成语音文件</span></span>
<span class="line"><span style="color:#8B949E;">      封装函数</span></span>
<span class="line"><span style="color:#8B949E;">      发送ajax</span></span>
<span class="line"><span style="color:#8B949E;">      获取服务器端 响应回来的数据</span></span>
<span class="line"><span style="color:#8B949E;">      将数据写入到 audio 标签里面即可</span></span>
<span class="line"><span style="color:#8B949E;">    </span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getAudio</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FFA657;">msg</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;http://ajax-base-api-t.itheima.net/api/synthesize&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;get&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">          text: msg</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">      }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(res.data.voiceUrl)</span></span>
<span class="line"><span style="color:#C9D1D9;">        document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#voice&#39;</span><span style="color:#C9D1D9;">).src </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.voiceUrl</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br></div></div><h2 id="聊天机器人-敲回车也可以发送消息" tabindex="-1">聊天机器人-敲回车也可以发送消息 <a class="header-anchor" href="#聊天机器人-敲回车也可以发送消息" aria-hidden="true">#</a></h2><h3 id="目标-25" tabindex="-1">目标 <a class="header-anchor" href="#目标-25" aria-hidden="true">#</a></h3><p>敲回车也可以发送消息</p><h3 id="步骤-6" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-6" aria-hidden="true">#</a></h3><ol><li>获取 输入框 注册 键盘事件 keyup | keydown</li><li>需要判断按下的 回车键 事件对象 key 属性</li><li>模拟 发送按钮的 点击事件</li></ol><h3 id="示例代码-10" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-10" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ie=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;css/reset.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;css/main.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- &lt;script src=&quot;./js/jquery-1.12.4.min.js&quot;&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color:#8B949E;">  &lt;script src=&quot;./js/scroll.js&quot;&gt;&lt;/script&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;聊天机器人&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;wrap&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 头部 Header 区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;header&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">h3</span><span style="color:#C9D1D9;">&gt;小思同学&lt;/</span><span style="color:#7EE787;">h3</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person01.png&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;icon&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 中间 聊天内容区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;main&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;talk_list&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">style</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;top: 0px;&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;talk_list&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 机器人 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;left_word&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person01.png&quot;</span><span style="color:#C9D1D9;"> /&gt; &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;嗨，最近想我没有？&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 我 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- &lt;li class=&quot;right_word&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">          &lt;img src=&quot;img/person02.png&quot; /&gt; &lt;span&gt;嗨，最近想我没有？&lt;/span&gt;</span></span>
<span class="line"><span style="color:#8B949E;">        &lt;/li&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 底部 消息编辑区域 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;footer&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img/person02.png&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;icon&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;说的什么吧...&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;input_txt&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;ipt&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">value</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;发 送&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;input_sub&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btnSend&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./js/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- &lt;script src=&quot;./js/scroll.js&quot;&gt;&lt;/script&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">audio</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;voice&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">autoplay</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">style</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;display: none;&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">audio</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      1. 用户点击 发送 按钮 将输入框的数据 显示到页面</span></span>
<span class="line"><span style="color:#8B949E;">        1.1 获取发送按钮注册点击事件</span></span>
<span class="line"><span style="color:#8B949E;">        1.2 获取输入框里面的内容</span></span>
<span class="line"><span style="color:#8B949E;">        1.3 非空判断</span></span>
<span class="line"><span style="color:#8B949E;">        1.4 创建 li 标签 document.createElement(&#39;li&#39;)</span></span>
<span class="line"><span style="color:#8B949E;">        1.5 给创建的 li 添加类名</span></span>
<span class="line"><span style="color:#8B949E;">        1.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#8B949E;">        1.7 获取 ul 将 创建的 li 标签 追加 ul 的最后面</span></span>
<span class="line"><span style="color:#8B949E;">        1.8 清空输入框</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      2. 用户输入内容 滚动条应该滚动到最底部</span></span>
<span class="line"><span style="color:#8B949E;">        2.1 滚动事件 scrollTop  向上滚动距离 可以给某个元素设置</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      3. 让机器人回消息</span></span>
<span class="line"><span style="color:#8B949E;">        3.1 建议封装函数</span></span>
<span class="line"><span style="color:#8B949E;">        3.2 发送ajax 注意请求方式和请求参数</span></span>
<span class="line"><span style="color:#8B949E;">        3.3 获取 服务器响应回来的数据</span></span>
<span class="line"><span style="color:#8B949E;">        3.4 创建 li 标签 document.createElement(&#39;li&#39;)</span></span>
<span class="line"><span style="color:#8B949E;">        3.5 给创建的 li 添加类名  left_word</span></span>
<span class="line"><span style="color:#8B949E;">        3.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#8B949E;">        3.7 追加 ul 的最后面</span></span>
<span class="line"><span style="color:#8B949E;">        3.8 让ul滚动到最下面</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ul</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#talk_list&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1.1 获取发送按钮注册点击事件</span></span>
<span class="line"><span style="color:#C9D1D9;">    document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnSend&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.2 获取输入框里面的内容</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ipt</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#ipt&#39;</span><span style="color:#C9D1D9;">).value.</span><span style="color:#D2A8FF;">trim</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.3 非空判断</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (ipt </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;请输入内容&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.4 创建 li 标签 document.createElement(&#39;li&#39;)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">createElement</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;li&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.5 给创建的 li 添加类名</span></span>
<span class="line"><span style="color:#C9D1D9;">      li.className </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;right_word&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#C9D1D9;">      li.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`&lt;img src=&quot;img/person02.png&quot; /&gt; &lt;span&gt;${</span><span style="color:#C9D1D9;">ipt</span><span style="color:#A5D6FF;">}&lt;/span&gt;`</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.7 获取 ul 将 创建的 li 标签 追加 ul 的最后面 </span></span>
<span class="line"><span style="color:#C9D1D9;">      ul.</span><span style="color:#D2A8FF;">appendChild</span><span style="color:#C9D1D9;">(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.8 清空输入框</span></span>
<span class="line"><span style="color:#C9D1D9;">      document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#ipt&#39;</span><span style="color:#C9D1D9;">).value </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// ul.scrollTop = 200000</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 2.1 滚动事件 scrollTop  向上滚动距离 可以给某个元素设置</span></span>
<span class="line"><span style="color:#C9D1D9;">      ul.scrollTop </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> ul.scrollHeight</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 调用函数</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">getMsg</span><span style="color:#C9D1D9;">(ipt)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">     3. 让机器人回消息</span></span>
<span class="line"><span style="color:#8B949E;">       3.1 建议封装函数</span></span>
<span class="line"><span style="color:#8B949E;">       3.2 发送ajax 注意请求方式和请求参数</span></span>
<span class="line"><span style="color:#8B949E;">       3.3 获取 服务器响应回来的数据</span></span>
<span class="line"><span style="color:#8B949E;">       3.4 创建 li 标签 document.createElement(&#39;li&#39;)</span></span>
<span class="line"><span style="color:#8B949E;">       3.5 给创建的 li 添加类名  left_word</span></span>
<span class="line"><span style="color:#8B949E;">       3.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#8B949E;">       3.7 追加 ul 的最后面</span></span>
<span class="line"><span style="color:#8B949E;">       3.8 让ul滚动到最下面</span></span>
<span class="line"><span style="color:#8B949E;">   */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 获取机器人回的消息</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getMsg</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> (</span><span style="color:#FFA657;">text</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 发送ajax</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/robot&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;get&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">          spoken: text</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">      }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(res.data.info.text)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">createElement</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;li&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 1.5 给创建的 li 添加类名</span></span>
<span class="line"><span style="color:#C9D1D9;">        li.className </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;left_word&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 1.6 给创建的 li 添加内容 并且修改 span标签里面的文字</span></span>
<span class="line"><span style="color:#C9D1D9;">        li.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`&lt;img src=&quot;img/person02.png&quot; /&gt; &lt;span&gt;${</span><span style="color:#C9D1D9;">res</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">data</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">info</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">text</span><span style="color:#A5D6FF;">}&lt;/span&gt;`</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 1.7 获取 ul 将 创建的 li 标签 追加 ul 的最后面 </span></span>
<span class="line"><span style="color:#C9D1D9;">        ul.</span><span style="color:#D2A8FF;">appendChild</span><span style="color:#C9D1D9;">(li)</span></span>
<span class="line"><span style="color:#C9D1D9;">        ul.scrollTop </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> ul.scrollHeight</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 调用文字转语音的函数</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">getVoice</span><span style="color:#C9D1D9;">(res.data.info.text)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      4. 文字转语音  将机器人回的消息转换成语音</span></span>
<span class="line"><span style="color:#8B949E;">        4.1 建议封装函数 在机器人回的消息 里面调用函数</span></span>
<span class="line"><span style="color:#8B949E;">        4.2 发送ajax 让服务器将文字转语音</span></span>
<span class="line"><span style="color:#8B949E;">        4.3 获取到 audio 标签 将 语音赋值给 audio的 src 属性</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getVoice</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FFA657;">text</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;http://ajax-base-api-t.itheima.net/api/synthesize&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;get&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">          text</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">      }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (res.status </span><span style="color:#FF7B72;">!==</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">200</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(res.message)</span></span>
<span class="line"><span style="color:#C9D1D9;">        document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#voice&#39;</span><span style="color:#C9D1D9;">).src </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.voiceUrl</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      5. 用户在输入框里面 敲回车 也可以发送消息</span></span>
<span class="line"><span style="color:#8B949E;">        5.1 获取 输入框 注册 键盘事件 keyup keydown</span></span>
<span class="line"><span style="color:#8B949E;">        5.2 需要判断按下的 回车键 事件对象 key 属性</span></span>
<span class="line"><span style="color:#8B949E;">        5.3 可以去模拟 发送按钮的 点击事件</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#ipt&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;keydown&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">e</span><span style="color:#C9D1D9;">){</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (e.key </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;Enter&#39;</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 在 模拟 按钮的 鼠标左键点击</span></span>
<span class="line"><span style="color:#C9D1D9;">        document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnSend&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">click</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br></div></div><h2 id="作业" tabindex="-1">作业 <a class="header-anchor" href="#作业" aria-hidden="true">#</a></h2><h3 id="作业1-整理笔记" tabindex="-1">作业1-整理笔记 <a class="header-anchor" href="#作业1-整理笔记" aria-hidden="true">#</a></h3><ol><li>把今天知识点梳理一遍, 记好笔记</li></ol><h3 id="作业2-案例" tabindex="-1">作业2-案例 <a class="header-anchor" href="#作业2-案例" aria-hidden="true">#</a></h3><ol><li>课上案例至少再写一遍</li></ol><h3 id="作业3-在作业文件夹中" tabindex="-1">作业3-在作业文件夹中 <a class="header-anchor" href="#作业3-在作业文件夹中" aria-hidden="true">#</a></h3><h3 id="作业4-答题-每日反馈" tabindex="-1">作业4-答题+每日反馈 <a class="header-anchor" href="#作业4-答题-每日反馈" aria-hidden="true">#</a></h3><ol><li>10道选择题(祝你得100分): <a href="https://ks.wjx.top/vm/QDYFsAF.aspx" target="_blank" rel="noreferrer">https://ks.wjx.top/vm/QDYFsAF.aspx</a></li></ol><h2 id="面试题" tabindex="-1">面试题 <a class="header-anchor" href="#面试题" aria-hidden="true">#</a></h2><ol><li>说一下 GET 和 POST 的区别:<a href="http://fanyouf.gitee.io/interview/http/06.html" target="_blank" rel="noreferrer">http://fanyouf.gitee.io/interview/http/06.html</a></li><li>说一下常见的状态码：<a href="http://fanyouf.gitee.io/interview/http/05.html#%E7%AE%80%E7%89%88" target="_blank" rel="noreferrer">http://fanyouf.gitee.io/interview/http/05.html</a></li></ol><h2 id="参考文献" tabindex="-1">参考文献 <a class="header-anchor" href="#参考文献" aria-hidden="true">#</a></h2><ol><li><a href="https://baike.baidu.com/item/%E5%AE%A2%E6%88%B7%E7%AB%AF/101081?fr=aladdin" target="_blank" rel="noreferrer">客户端-&gt;百度百科</a></li><li><a href="https://baike.baidu.com/item/%E6%B5%8F%E8%A7%88%E5%99%A8/213911?fr=aladdin" target="_blank" rel="noreferrer">浏览器解释-&gt;百度百科</a></li><li><a href="https://baike.baidu.com/item/%E6%9C%8D%E5%8A%A1%E5%99%A8/100571?fr=aladdin" target="_blank" rel="noreferrer">服务器解释-&gt;百度百科</a></li><li><a href="https://baike.baidu.com/item/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E5%AE%9A%E4%BD%8D%E7%B3%BB%E7%BB%9F/5937042?fromtitle=URL&amp;fromid=110640&amp;fr=aladdin" target="_blank" rel="noreferrer">url解释-&gt;百度百科</a></li><li><a href="https://baike.baidu.com/item/HTTP?fromtitle=HTTP%E5%8D%8F%E8%AE%AE&amp;fromid=1276942" target="_blank" rel="noreferrer">http协议-&gt;百度百科</a></li><li><a href="https://baike.baidu.com/item/%E4%B8%BB%E6%9C%BA%E5%90%8D" target="_blank" rel="noreferrer">主机名-&gt;百度百科</a></li><li><a href="https://baike.baidu.com/item/%E7%AB%AF%E5%8F%A3%E5%8F%25B" target="_blank" rel="noreferrer">端口号-&gt;百度百科</a></li><li><a href="https://baike.baidu.com/tashuo/browse/content?id=11fca6ecdc2c066af4c5594f&amp;lemmaId=8425&amp;fromLemmaModule=pcBottom&amp;lemmaTitle=ajax" target="_blank" rel="noreferrer">Ajax解释-&gt;百度-懂啦</a></li><li><a href="https://baike.baidu.com/item/axios" target="_blank" rel="noreferrer">axios-&gt;百度(可以点击播报听读音)</a></li><li><a href="https://github.com/axios/axios" target="_blank" rel="noreferrer">axios(github)地址</a></li><li><a href="https://axios-http.com/" target="_blank" rel="noreferrer">axios官方推荐官网</a></li><li><a href="https://www.npmjs.com/package/axios" target="_blank" rel="noreferrer">axios(npmjs)地址</a></li><li><a href="https://baike.baidu.com/item/post/2171305" target="_blank" rel="noreferrer">GET和POST区别-&gt;百度百科</a></li><li><a href="https://baike.baidu.com/item/%E6%8A%A5%E6%96%87/3164352" target="_blank" rel="noreferrer">报文讲解-&gt;百度百科</a></li><li><a href="https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660" target="_blank" rel="noreferrer">HTTP状态码-&gt;百度百科</a></li><li><a href="https://baike.baidu.com/item/%E6%8E%A5%E5%8F%A3/2886384" target="_blank" rel="noreferrer">接口概念-&gt;百度百科</a></li></ol></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-cfb513e0 data-v-21f75714><!----><div class="prev-next" data-v-21f75714><div class="pager" data-v-21f75714><!----></div><div class="pager" data-v-21f75714><a class="pager-link next" href="/tingweipeng/ajax/day02.html" data-v-21f75714><span class="desc" data-v-21f75714>Next page</span><span class="title" data-v-21f75714>02-表单提交</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"ajax_day02.md\":\"e35eca52\",\"ajax_day03.md\":\"585e2c65\",\"ajax_day04.md\":\"0ca703d2\",\"ajax_index.md\":\"2b437449\",\"index.md\":\"ff5d4089\",\"js进阶_day02.md\":\"24ed742a\",\"js进阶_day03.md\":\"f0d3d414\",\"js进阶_day04.md\":\"d30bb382\",\"js进阶_index.md\":\"c6d77850\",\"vue基础_day02.md\":\"5f8c856e\",\"vue基础_day03.md\":\"7cd8d83f\",\"vue基础_index.md\":\"05339e1f\",\"webapis_day02.md\":\"0ca07905\",\"webapis_day03.md\":\"80c6b805\",\"webapis_day04.md\":\"6159ddb6\",\"webapis_day05.md\":\"fdfba8b3\",\"webapis_day06.md\":\"aaece170\",\"webapis_index.md\":\"8bdb89a3\"}")</script>
    <script type="module" async src="/tingweipeng/assets/app.bfa3a24a.js"></script>
    
  </body>
</html>